鸿蒙Flex布局

效果：

代码：

换行代码参数设置： wrap:FlexWrap.Wrap

@Entry
@Component
struct FlexCase {
  @State message: string = 'Hello World';

  build() {
   Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceAround,
   alignItems:ItemAlign.Center,
     wrap:FlexWrap.Wrap//换行
   }){

     Row()
       .height(100)
       .width(100)
       .backgroundColor(Color.Blue)
     Row()
       .height(100)
       .width(100)
       .backgroundColor(Color.Blue)
     Row()
       .height(100)
       .width(100)
       .backgroundColor(Color.Blue)
     Row()
       .height(100)
       .width(100)
       .backgroundColor(Color.Blue)
     Row()
       .height(100)
       .width(100)
       .backgroundColor(Color.Blue)
   }
   .height("100%")
   .backgroundColor(Color.Pink)
  }
}

flex布局换行是参数设置，并非通过属性设置；

“.height”，表示属性，括号里传的数据，表示参数