鸿蒙Next学习-Flex布局

news2025/1/13 13:57:58

@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
    })