HarmonyOS 组件通用属性之位置设置

news2024/11/16 18:59:18

本文我们来说通用属性中的位置设置

主要是针对组件的对齐方式布局方向显示位置
做过WEB开发的对流式布局应该都不陌生就是一行放内容不够放就换行

我们可以先这样写

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Stack(){
          Text("你好")
          Text("html")
          Text("java")
        }.width('100%')
        .height('100%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

Stack是一个用来布局的组件
运行代码
在这里插入图片描述
会发现所有内容重叠在一起了
这个时候我们可以用一个属性 align 设置对齐方式

我们直接在元素下面输入 .align(Alignment.); 就会弹出对齐方式的提示
在这里插入图片描述
比较明显的 top center bottom
上中下起始点的提示

我们先来个top
但我们要 TopStart
这样内容就顶到左上角去了
在这里插入图片描述
如果是 top 会在顶部但会居中

TopEnd 简单说右上角对齐

然后直接 Start
简单说水平左对齐垂直居中

BottomStart 左下角

其他几个也基本都是一个意思
center 就是双方向居中
也就是默认这个效果

然后我们来看下一个属性我们改写代码如下

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Row(){
          Text("你好")
          Text("html")
          Text("java")
        }.width('100%')
        .height('100%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

先用 Row 元素
在这里插入图片描述
我们还是在元素下面加上 .direction(Direction.) 就会弹出它的属性提示了

Auto 就是自动也是它的默认值
Ltr 这个简单说从左至右也是默认的这个效果
Rtl 从右至左我们加上他就反过来了

然后来看 position
学习过 WEB端的定位的朋友看到这个会比较熟悉
我们将代码改成这样

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Row(){
          Text("你好")
          Text("html")
          Text("java")
        }.width('100%')
        .height('100%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

一个行容器 Row 里面放了多个 Text组件
在这里插入图片描述
我们可以这样写

Row(){
	Text("你好").position({x: 0,y: 0})
	Text("html").position({x: 30,y: 20})
	Text("java").position({x: "70%",y: "50%"})
}.width('100%')
.height('100%')

鸿蒙的 position也是定位语法他是 x y两个轴方向控制针对自己的父元素
例如 Text(“你好”).position({x: 0,y: 0})
x 0 就是最左边 y 0就是最上面所以这个元素就在左上角
然后从第三个可以看出我们这个是可以用百分比的
它的位置是相对父元素的
在这里插入图片描述
markAnchor 这个是相对于自身的
我们先将代码改成这样

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Stack({alignContent: Alignment.TopStart}){
          Text("你好")
          Text("html")
          Text("java")
        }.width('100%')
        .height('100%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

我们用个 Stack 设置 TopStart 让全部元素到左上角
在这里插入图片描述
我们可以这样写

Stack({alignContent: Alignment.TopStart}){
	Text("你好").markAnchor({
	  x: 0,y: 0
	})
	Text("html").markAnchor({
	  x: -20,y: -30
	})
	Text("java").markAnchor({
	  x: -10,y: -50
	})
}.width('100%')
.height('100%')

这个markAnchor 它是相对于自己去移动的说个词相对定位当然它不会留自己原来的位置但是它是相对自己原来的位置移动的而且它的 x y是反的 x 正值向左负值向右 y正值向上负值向下
在这里插入图片描述
最后一个 offset
我们可以先这样写

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Row(){
          Text("你好").width(100)
          Text("html").width(100)
          Text("java").width(100)
        }.width('100%')
        .height('100%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

在这里插入图片描述
然后我们给子元素都设置 offset

 Row(){
	Text("你好").width(100).offset({x: 0,y: 0})
	Text("html").width(100).offset({x: 0,y: 0})
	Text("java").width(100).offset({x: 0,y: 0})
}.width('100%')
.height('100%')