【鸿蒙学习笔记】尺寸设置・layoutWeight・对子组件进行重新布局

官方文档：尺寸设置

layoutWeight：对子组件进行重新布局

设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置。

// 引入包名
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct PracExample {
  build() {
    Column() {
      Row() {
        Text('1/3')
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .size({ width: '30%', height: 110 })
        Text('2/3')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .size({ width: '30%', height: 110 })
        Text('no')
          .backgroundColor(Color.Yellow)
          .textAlign(TextAlign.Center)
          .size({ width: '10%', height: 110 })
      }
      .backgroundColor(Color.Gray)
      .size({ width: '100%', height: 140 })

      Divider().height(10)

      Row() {
        // 权重1，占主轴剩余空间1/3
        Text('1/3')
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .size({ width: '30%', height: 110 })
          .layoutWeight(1)
        // 权重2，占主轴剩余空间2/3
        Text('2/3')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .size({ width: '30%', height: 110 })
          .layoutWeight(2)
        // 未设置，组件按照自身尺寸渲染
        Text('no')
          .backgroundColor(Color.Yellow)
          .textAlign(TextAlign.Center)
          .size({ width: '10%', height: 110 })
      }
      .backgroundColor(Color.Black)
      .size({ width: '100%', height: 140 })
    }
  }
}