鸿蒙ArkUI学习之布局篇--线性布局、弹性布局、层叠布局

这段时间忙于找工作，也考虑是否转方向，于是想着学习鸿蒙开发，首先从ArkUI开始，从它的布局组件出发吧~

线性布局

ArkUI最常用的布局方式，有两种：

Row：水平方向上排列布局，主轴是水平方向

Column：垂直方向上排列布局，主轴是垂直方向

几个常用设置属性

space：能够设置布局里面子元素的间距

@Entry
@Component
struct Index {

  build(){
    Column({ space: 30}) {
      Column().height(50).width('100%').backgroundColor(Color.Red)
      Column().height(50).width('100%').backgroundColor(Color.Green)
      Column().height(50).width('100%').backgroundColor(Color.Brown)
    }
    .width('100%')
  }
}

效果如下：

justifyContent：设置主轴对齐方式

alignItems设置交叉轴的对齐方式

如果是Column（交叉轴是水平的）那么使用HorizontalAlign作为参数

如果是Row（交叉轴是垂直的）那么使用VerticalAlign作为参数

使用Blank()自适应拉伸

在容器主轴方向自动填充空白空间，达到自适应拉伸效果

layoutWeight设置子元素权重，自适应占满剩余空间

弹性布局Flex

容器的元素可以按照任意方向排序，通过设置direction参数，切换元素的主轴方向

可以设置wrap参数控制子元素是否换行显示 当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局

justifyContent设置主轴对齐方式

层叠布局Stack

层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置

alignContent参数设置对齐方式

zIndex参数修改层级关系，zIndex越大，层级越高，即会覆盖zIndex小的组件