鸿蒙开发position与offset定位区别

鸡腿大王 0 阅读 ArkUI

绝对定位position

@Entry
@Component
struct Hxpy {

  build() {
    Column() {
      Column() {
        Text('红')
          .fontColor(Color.White)
          .fontSize(40)
          .textAlign(TextAlign.Center) //文字居中
          .aspectRatio(1)
          .width(80)
          .backgroundColor(Color.Red)
          .position({x:0,y:0})

        Text('红')
          .fontColor(Color.White)
          .fontSize(40)
          .textAlign(TextAlign.Center) //文字居中
          .aspectRatio(1)
          .width(80)
          .backgroundColor(Color.Red)
          .position({x:80,y:80})

        Text('红')
          .fontColor(Color.White)
          .fontSize(40)
          .textAlign(TextAlign.Center) //文字居中
          .aspectRatio(1)
          .width(80)
          .backgroundColor(Color.Red)
          .position({x:160,y:160})

        Text('红')
          .fontColor(Color.White)
          .fontSize(40)
          .textAlign(TextAlign.Center) //文字居中
          .aspectRatio(1)
          .width(80)
          .backgroundColor(Color.Red)
          .position({x:240,y:240})
      }
      .width('100%')
      .height(360)
      .backgroundColor(Color.Pink)
    }
    .height('100%')
    .width('100%')

  }
}

相对定位offset

@Entry
@Component
struct Hxpy {

  build() {
    Column() {
      Column() {
        Text('红')
          .fontColor(Color.White)
          .fontSize(40)
          .textAlign(TextAlign.Center) //文字居中
          .aspectRatio(1)
          .width(80)
          .backgroundColor(Color.Red)
          .offset({x:0,y:0})

        Text('红')
          .fontColor(Color.White)
          .fontSize(40)
          .textAlign(TextAlign.Center) //文字居中
          .aspectRatio(1)
          .width(80)
          .backgroundColor(Color.Red)
          .offset({x:80,y:0})


        Text('红')
          .fontColor(Color.White)
          .fontSize(40)
          .textAlign(TextAlign.Center) //文字居中
          .aspectRatio(1)
          .width(80)
          .backgroundColor(Color.Red)
          .offset({x:160,y:0})


        Text('红')
          .fontColor(Color.White)
          .fontSize(40)
          .textAlign(TextAlign.Center) //文字居中
          .aspectRatio(1)
          .width(80)
          .backgroundColor(Color.Red)
      }
      .width('100%')
      .height(360)
      .backgroundColor(Color.Pink)
    }
    .height('100%')
    .width('100%')

  }
}