【鸿蒙学习笔记】位置设置・position・绝对定位

官方文档：位置设置

position：绝对定位，确定子组件相对父组件的位置。

正→
↓

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

  build() {
    Column() {
      Column({ space: 20 }) {
        Row() {
          Text('1').size({ width: '30%', height: '50' }).backgroundColor(Color.Red)
          Text('2').size({ width: '45%', height: '50' }).backgroundColor(Color.Gray)
          Text('3').size({ width: '50', height: '30' }).backgroundColor(Color.Orange)
            .position({ x: 0, y: 0 }) // 坐标（0,0）
          Text('4').size({ width: '60%', height: '30' }).backgroundColor(Color.Yellow)
            .position({ x: 50, y: 30 }) // 坐标(50,30)
          Text('5').size({ width: '20', height: '20' }).backgroundColor(Color.Red)
            .position({ x: -20, y: -20 }) // 坐标(-20,-30)
          Text('6').size({ width: '50%', height: '50' }).backgroundColor(Color.Pink)
            .position({ x: '50%', y: '70%' }) // 坐标
        }.width('80%').height(200).border({ width: 1, style: BorderStyle.Dashed })
      }.width('100%').margin({ top: 30 })
    }.width('100%')
  }
}