#鸿蒙通关秘籍#实现自适应缩放有什么方法？

可以使用layoutWeight属性来调整Row或Column容器子元素的主轴权重，或者直接使用百分比来设置宽度。

bash @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%')
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

} }

@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%')
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

} }