鸿蒙 容器组件

Column 和 Row

Column 垂直布局 Row水平，主轴默认是Start，交叉轴默认是Center

Column({ space: 10 }) {
  Column() {
    Text('文本1').bordStyle()
    Text('文本2').bordStyle()
    Text('文本3').bordStyle()
    Text('文本3').bordStyle()
  }
  .bordStyle()
  .width(200)
  .height(200)
  // 主轴方向 默认是Start
  // FlexAlign.Center 中间，
  // FlexAlign.Start 开始的位置，
  // FlexAlign.End 结束的位置，
  // FlexAlign.SpaceBetween 上下贴边，其他平分
  // FlexAlign.SpaceAround 上下剩余，是其他剩余的一半
  // FlexAlign.SpaceEvenly 全部平分
  .justifyContent(FlexAlign.SpaceEvenly)
  // 交叉轴方向 默认是Center，End，Center
  .alignItems(HorizontalAlign.End)

Stack

堆叠容器,类似于FramLayout，默认是Center

// 参数 alignContent默认是Center，其他是8个方向加一个Center
Stack({ alignContent: Alignment.TopStart }) {
  Text('文本').margin({left:100,top:100})
  // 也可以用通用属性zIndex ，来控制再Z轴的方向
  Button('点我').zIndex(1)
}.bordStyle().width(200).height(200)

Flex

以弹性方式布局子组件的容器组件。Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用 必须设置成 Wrap，否则跟row ，colom 没啥区别

Flex({
  // 主轴
  direction: FlexDirection.Row,
  // 是否换行，必须换呀，否则用这个就没啥意义了
  wrap: FlexWrap.Wrap,
  // 主轴方向
  justifyContent: FlexAlign.Start,
  // 所有子组件在Flex容器交叉轴上的对齐格式。
  alignItems: ItemAlign.End,
  // 交叉轴中有额外的空间时，多行内容的对齐方式
  alignContent: FlexAlign.Start
})

RelativeContainer

相对布局，android中的RelativeLayout anchor锚点，如果是父亲__container__，每个View都有id top: {anchor: "container", align: VerticalAlign.Top},

RelativeContainer() {
  Row().width(100).height(100)
    .backgroundColor("#ffec0a0a")
    .alignRules({
      top: {anchor: "__container__", align: VerticalAlign.Top},
      left: {anchor: "__container__", align: HorizontalAlign.Start}
    })
    .id("row1")
    }

WaterFlow

瀑布流容器，由"行"和"列"分割的单元格所组成，通过容器自身的排列规则，将不同大小的"项目"自上而下，如瀑布般紧密布局。