鸿蒙开发中常用的布局属性

359 阅读1分钟

宽(width)和 高(height)

  • 有两种写法 width(数字), height(数字)与 width(百分比) height(百分比) image.png

内边距(padding)与外边距(margin)

  • 内边距(padding)在组件内添加间距,拉开内容与组件边缘之间的距离

  • 未加padding时的样式

image.png

image.png

  • 设置padding后的样式

image.png

image.png

  • 外边距(margin)在组件外面添加间距,拉开两个组件之间的距离
  • 未加margin时的样式
  • 三个text组件无间隔

image.png

image.png

  • 设置margin后的样式
  • 写法与padding相同 image.png image.png

layoutWeight属性

  • 当父容器尺寸确定时,设置了layoutWeight属性的子元素会根据权重进行布局。

image.png

image.png

-设置layoutWeight属性的子元素将按权重占用父元素的空白区域

image.png

image.png

位置属性

  • 绝对定位 position
  • 参照父组件左上角进行偏移 , 绝对定位后的组件不再占用自身原有位置 -下图 父元素为column 所以他的偏移将相对于column的左上角

image.png -偏移后 image.png

-相对定位 offset

  • 相对自身左上角进行偏移,相对定位后的组件仍然占用自身原有位置

  • 下图偏移将相对于自身左上角进行偏移

image.png

-偏移后,位置依然占用 image.png

边框属性

border

image.png

主轴对齐方式

justifyContent -column的轴为垂直向下方向

image.png

  • row的轴为水平方向上

image.png -属性值 image.png

交叉轴对齐方式

Column 主轴为垂直向下,交叉轴为水平方向

  • alignItems(HorizontalAlign.值)为Column专有

image.png Row 主轴为水平方向,交叉轴为垂直向下

image.png