【鸿蒙学习笔记】位置设置・position・绝对定位・子组件相对父组件

张紫娃

已于 2024-07-17 11:27:13 修改

阅读量776

点赞数 4

分类专栏：鸿蒙文章标签：鸿蒙

于 2024-07-14 16:05:37 首次发布

本文链接：https://blog.csdn.net/weixin_37646636/article/details/140418137

版权

鸿蒙专栏收录该内容

52 篇文章

订阅专栏

官方文档：位置设置

目录标题

position・绝对定位・子组件相对父组件
- Row + Text + position

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