ArkUI 学习之位置设置：markAnchor（锚点・微调找补）

markAnchor

markAnchor(value: Position | LocalizedPosition)

设置元素在位置定位时的锚点，从position或offset的位置上，进一步偏移。

！！！注意：有点往回微调的意思

 

说明：

设置.position({x: value1, y: value2}).markAnchor({x: value3, y: value4})，效果等于设置.position({x: value1 - value3, y: value2 - value4})，offset同理。

单独使用markAnchor，设置.markAnchor({x: value1, y: value2})，效果等于设置.offset({x: -value1, y: -value2})。

 

参数：

参数名	类型	必填	说明
value	Position | LocalizedPosition12+	是	API version 9及以前，默认值为：{ x: 0, y: 0} API version 10：无默认值。

 

示例：

@Entry
@Component
struct TestIndex {
  build() {
    Column() {
      Column({ space: 20 }) {
        Stack({ alignContent: Alignment.TopStart }) {
          Row().size({ width: 100, height: 100 }).backgroundColor(Color.Yellow)

          Text('A').size({ width: 30, height: 30 }).backgroundColor(Color.Pink)
            .markAnchor({ x: 0, y: 0 })

          Text('B').size({ width: 30, height: 30 }).backgroundColor(Color.Grey)
            .markAnchor({ x: -30, y: -30 }) // 正常左边移动运算反着计算

          Text('C').size({ width: 30, height: 30 }).backgroundColor(Color.Red)
            .markAnchor({ x: 30, y: 30 }) // 正常左边移动运算反着计算

        }.margin({ top: 40 }).border({ width: 2, style: BorderStyle.Dashed })
      }.width('100%')
    }.width('100%')
  }
}