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