526互联

十六、组件-通用属性-位置设置

发布时间 2023-12-20 09:59:27作者: 创客未来

位置设置

设置组件对齐方式、布局方向和显示位置。

align：设置元素内容在元素绘制区域内的对齐方式。

direction：设置元素水平方向的布局。

position:基于父容器的定位

markAnchor：相对于自身的定位，x正数代表左移，负数代表右移；y正数代表上移，负数代表下移。

offset:相对于自身的定位，x正数代表右移，负数代表左移；y正数代表下移，负数代表上移。

 

案例代码：

/**
 * author:创客未来
 * copyright:com.ckFuture.hrb
 * 组件位置
 */
@Entry
@Component
struct PositionExample {
  @State message: string = 'Hello World'

  build() {
    Column({space:10}) {
      Column({space:10}) {
        Text('align:').fontSize(26).fontColor(0x3E3E3E).width('90%')
        Stack(){
          Text('first').fontSize(26).fontColor(0x3E3E3E).height(70).backgroundColor(Color.Orange)
          Text('second').fontSize(26).fontColor(0x3E3E3E).height(30).backgroundColor(Color.Gray)
        }
        .width('90%')
        .height(100)
        .backgroundColor(Color.Blue)
        .align(Alignment.TopStart)
      }

      Column({space:10}) {
        Text('direction:').fontSize(26).fontColor(0x3E3E3E).width('90%')
        Row(){
          Text('1').fontSize(26).fontColor(0x3E3E3E).width('25%').backgroundColor(Color.Blue)
          Text('2').fontSize(26).fontColor(0x3E3E3E).width('25%').backgroundColor(Color.Brown)
          Text('3').fontSize(26).fontColor(0x3E3E3E).width('25%').backgroundColor(Color.Green)
          Text('4').fontSize(26).fontColor(0x3E3E3E).width('25%').backgroundColor(Color.Orange)
        }
        .width('90%')
        .height(100)
        .backgroundColor(Color.Grey)
        .direction(Direction.Rtl)
      }

      Column({space:10}) {
        Text('position:').fontSize(26).fontColor(0x3E3E3E).width('90%')
        Row(){
          Text('1').fontSize(26).fontColor(0x3E3E3E).width('25%').backgroundColor(Color.Blue)
          Text('2').fontSize(26).fontColor(0x3E3E3E).width('25%').backgroundColor(Color.Brown)
            .position({x:30,y:10})
          Text('3').fontSize(26).fontColor(0x3E3E3E).width('25%').backgroundColor(Color.Green)
          Text('4').fontSize(26).fontColor(0x3E3E3E).width('25%').backgroundColor(Color.Orange)
            .position({x:'70%',y:60})
        }
        .width('90%')
        .height(100)
        .border({width:1})
      }

      Column() {
        Text('markAnchor:').fontSize(26).fontColor(0x3E3E3E).width('90%')
        Stack({alignContent:Alignment.TopStart}){
          Row(){

          }
          .width(100)
          .height(100)
          .backgroundColor(Color.Yellow)

          Text('1').fontSize(26).fontColor(0x3E3E3E).width('25').height(25).backgroundColor(Color.Blue)
            .markAnchor({x:25,y:10})
          Text('2').fontSize(26).fontColor(0x3E3E3E).width('25').height(25).backgroundColor(Color.Brown)
            .markAnchor({x:-100,y:-50})
          Text('3').fontSize(26).fontColor(0x3E3E3E).width('25').height(25).backgroundColor(Color.Green)
            .markAnchor({x:25,y:-70})
        }
      }

      Column({space:10}) {
        Text('offset:').fontSize(26).fontColor(0x3E3E3E).width('90%')
        Row(){
          Text('1').fontSize(26).fontColor(0x3E3E3E).width('25%').backgroundColor(Color.Blue)
          Text('2').fontSize(26).fontColor(0x3E3E3E).width('25%').backgroundColor(Color.Brown)
            .offset({x:30,y:20})
          Text('3').fontSize(26).fontColor(0x3E3E3E).width('25%').backgroundColor(Color.Green)
          Text('4').fontSize(26).fontColor(0x3E3E3E).width('25%').backgroundColor(Color.Orange)
            .offset({x:-10,y:-10})
        }
        .width('90%')
        .height(100)
        .border({width:1})
      }

    }
  }
}