HarmonyOS 子控件设置宽度100%问题

给子组件设置margin值，那么子组件的宽度就是本身的宽度加上margin的宽度，设置wdith(‘100%’)后，设置水平margin，子组件宽度就会超过父组件，所以得不到想要的效果，建议width值和margin都用百分比控制，加起来是100%即可，如下demo所示:

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Row().width('90%').margin({ left: '5%', right: '5%' }).height(200).backgroundColor(Color.Yellow)
      }.width('90%').height(300).border({ width: 3, color: Color.Pink }).margin('5%')
    }.height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

或者用Flex：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Flex({
          justifyContent: FlexAlign.Center,
          alignItems: ItemAlign.Center
        }) {
          Row().width('100%').margin({ left: '5%', right: '5%' }).height(200).backgroundColor(Color.Yellow)
        }.width('90%').height(300).border({ width: 3, color: Color.Pink }).margin('5%')
      }
    }.height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

并不是bug，而是设计的一部分，旨在提高布局的灵活性和兼容性。这种设计方式在许多前端框架中是一致的，包括HTML/CSS中的盒模型。能够明确地计算并控制元素的总宽度，包括内边距和边距，使得布局更加可预测和精确。