【鸿蒙学习笔记】位置设置・markAnchor・锚点・微调找补

官方文档：位置设置

markAnchor：设置子元素在位置定位时的锚点

１・.position({x: v1, y: v2}).markAnchor({x: v3, y: v4})等效于.position({x: v1 - v3, y: v2 - v4})，offset同理。
２・单独使用markAnchor，设置.markAnchor({x: v1, y: v2})等效于.offset({x: -v1, y: -v2})。

@Entry
@Component
struct Loc_markAnchor {
  @State message: string = 'Hello World';

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