ArkUI 学习之位置设置:offset(相对偏移・相对原本的位置进行偏移)

offset

offset(value: Position | Edges | LocalizedEdges)

相对偏移,组件相对原本的布局位置进行偏移。offset属性不影响父容器布局,仅在绘制时调整位置。可以参考,前端中的相当布局。

 

说明:

Position类型基于组件自身左上角偏移,Edges类型基于组件自身四边偏移。 offset属性设置 {x: x, y: y} 与设置 {left: x, top: y} 以及 {right: -x, bottom: -y} 效果相同, 类型LocalizedEdges支持镜像模式:LTR模式下start 等同于x,RTL模式下等同于-x

 

参数:

参数名类型必填说明
value Position | Edges12+ | LocalizedEdges12+

API version 9及以前,默认值为:{x: 0,y: 0}

默认单位:vp

API version 10:无默认值。

 

示例:

@Entry
@Component
struct TestIndex {
  build() {
    Column() {
      Row() {
        Text('1').size({ width: '50', height: '50' }).backgroundColor(Color.Yellow)

        /** 坐标(0,0) */
        Text('2').size({ width: '50', height: '50' }).backgroundColor(Color.Orange)
          .offset({ x: 0, y: 0 })

        /** 坐标(10,10) */
        Text('3').size({ width: '60', height: '50' }).backgroundColor(Color.Brown)
          .offset({ x: 10, y: 10 })

        /** 坐标(0%,0%) */
        Text('4').size({ width: '50', height: '50' }).backgroundColor(Color.Pink)
          .offset({ x: '-0%', y: '0%' })

        /** 坐标(-10%,10%) */
        Text('5').size({ width: '50', height: '50' }).backgroundColor(Color.Green)
          .offset({ x: '-10%', y: '10%' })
      }.width('90%').height(300).backgroundColor(Color.Gray)
    }.width('100%').height('100%')
  }
}

 

 

 

posted on 2024-11-01 13:56  梁飞宇  阅读(124)  评论(0)    收藏  举报