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

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

主要是针对组件的对齐方式布局方向显示位置

做过WEB开发的对流式布局应该都不陌生就是一行放内容不够放就换行

我们可以先这样写

typescript 复制代码

@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 就是双方向居中

也就是默认这个效果

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

typescript 复制代码

@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端的定位的朋友看到这个会比较熟悉

我们将代码改成这样

typescript 复制代码

@Entry
@Component
struct Index {

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

一个行容器 Row 里面放了多个 Text组件

我们可以这样写

typescript 复制代码

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 这个是相对于自身的

我们先将代码改成这样

typescript 复制代码

@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 让全部元素到左上角

我们可以这样写

typescript 复制代码

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

我们可以先这样写

typescript 复制代码

@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

typescript 复制代码

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

我们会发现并没有什么明显的效果

但我们改一改

将第二个的 x 改 50 你会发现它自己会相对位移但他不会影响其他元素自己动

你把 y改一下会发现一个很奇葩的事

x是正的正右负左 y轴反的正下负上