空白和分离

自适应拉伸

注意

1. 空白填充组件Blank在容器主轴方向自动填充空白空间，达到自适应拉伸效果。

2. Row 和 Column 作为容器，只需要添加宽高为百分比，当屏幕宽高发生变化时，会产生自适应效果。

代码

@Entry
@Component
struct BlankExample {
  build() {
    Column() {
      Row() {
        Text('Bluetooth').fontSize(18)
        Blank()
        Toggle({ type: ToggleType.Switch, isOn: true })
      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')
    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
  }
}

横向

纵向

自适应缩放

注意

1. 使用layoutWeight属性设置权重，当容器主轴方向空间不足时，会根据权重比例进行缩放。

2. 设置百分比宽高，当屏幕宽高发生变化时，会产生自适应效果。

layoutWeight

注意

1. 使用了 layoutWeight 的元素，其宽或者高设置无效，由权重决定。

2. layoutWeight 的值必须为正整数，默认值为 1。

3. layoutWeight 的值越大，占的份数越多。

4. layoutWeight 只能在 Row 和 Column 容器中使用。

@Entry
@Component
struct layoutWeightExample {
  build() {
    Column() {
      Text('1:2:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(1)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')

      }.backgroundColor(0xffd306).height('30%')

      Text('2:5:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(5)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(5).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}

• 横屏效果

• 竖屏效果

百分比宽高

• 父容器尺寸确定时，使用百分比设置子元素和兄弟元素的宽度，使他们在任意尺寸的设备下保持固定的自适应占比。

@Entry
@Component
struct WidthExample {
  build() {
    Column() {
      Row() {
        Column() {
          Text('left width 20%')
            .textAlign(TextAlign.Center)
        }.width('20%').backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('center width 50%')
            .textAlign(TextAlign.Center)
        }.width('50%').backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('right width 30%')
            .textAlign(TextAlign.Center)
        }.width('30%').backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}

• 横屏效果

• 竖屏效果

分离

在鸿蒙中 一般使用组件Divider作为组件分割

在设置 divider 属性时，可以通过 strokeWidth 和 color 属性设置分隔线的粗细和颜色。

startMargin 和 endMargin 属性分别用于设置分隔线距离列表侧边起始端的距离和距离列表侧边结束端的距离。

• 代码如下

// 纵向
Divider()
  .vertical(true)
  .height(22)
  .color("#182431")
  .opacity(0.6)
  .margin({ left: 8, right: 8 });
// 横向
Divider().strokeWidth(8).color("#F1F3F5").startMargin(8).endMargin(8);