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

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

我们可以先这样写

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

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

我们先来个top 但我们要 TopStart 这样 内容就顶到左上角去了 如果是 top 会在顶部 但会居中 TopEnd 简单说 右上角对齐 然后 直接 Start 简单说 水平左对齐 垂直居中 BottomStart 左下角 其他几个也基本都是一个意思 center 就是双方向居中 也就是 默认这个效果 然后 我们来看下一个属性 我们改写代码如下

先用 Row 元素 我们还是 在元素下面 加上 .direction(Direction.) 就会弹出它的属性提示了 Auto 就是 自动 也是它的默认值 Ltr 这个简单说 从左至右 也是默认的这个效果 Rtl 从右至左 我们加上 他就反过来了 然后 来看 position 学习过 WEB端的定位的朋友 看到这个会比较熟悉 我们将代码改成这样

一个行容器 Row 里面放了多个 Text组件 我们可以这样写

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

我们用个 Stack 设置 TopStart 让全部元素到 左上角 我们可以这样写

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

然后 我们给子元素都设置 offset

我们会发现 并没有什么明显的效果 但我们改一改 将第二个的 x 改 50 你会发现 它自己会相对位移 但他不会影响其他元素 自己动 你把 y改一下 会发现一个很奇葩的事 x是正的 正右 负左 y轴 反的 正下 负上