官方文档:位置设置

position・绝对定位・子组件相对父组件

正→

Row + Text + 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%')
  }
}

在这里插入图片描述

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐