鸿蒙Next学习-Flex布局

@Entry
@Component
struct FlexCase {
  build() {
    //需要在构造参数上传
    Flex({ direction: FlexDirection.Row,justifyContent:FlexAlign.Center }) {
      //flex布局
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Red)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Yellow)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
    }

  }
}

 @Entry
@Component
struct FlexCase {
  build() {
    //需要在构造参数上传
    Flex({
      direction: FlexDirection.Column,
      justifyContent:FlexAlign.SpaceAround,
    alignItems:ItemAlign.Center}) {
      //flex布局
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Red)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Yellow)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
    }
    .width('100%')

  }
}

当我们不知道参数属性时，我们可以鼠标悬浮参数上 就能看到提示如下

以下是几种参数 参考

 Flex({
      // direction 控制方向  Row Column
      direction: FlexDirection.Row,
      // justifyContent 主轴方向对齐
      justifyContent:FlexAlign.SpaceAround,
      // alignItems 横轴方向对齐
      alignItems:ItemAlign.Center,
      // wrap 换行
      wrap:FlexWrap.Wrap
    })

Flex布局设置方向 ，是通过参数并不是通过属性

参数：

属性：

本文章摘自chaunzhi