Flex布局的使用方法

Flex是一个容器组件，它里面的内容是Flex布局，这个内容是横向的还是纵向的，取决的是flask本身的一个

布局的方向，主要还是看往里面传的参数，传参的方法就是Flex({再这里传如键值对}),比如说我们想让这个布局变成横向的布局就是传入 direction:FlexDirection.Row这个属性

Flex容器里面的参数		与下面表关联的外键
direction【地rui可神：方向】	关于它布局方向的键	1
justifyContent【夹死听fai康ten特：主轴方向的对齐方式】	关于它主轴对齐方式的键	2
alignItems【额len 爱特们斯：一种对齐方式】	一种对齐方式关于侧轴的对齐方式	3
wrap【外普：换行】

参数对应的属性		与上面表关联的外键
FlexDirection【弗莱克斯地rui可神：flask布局的方向】	row【肉：横向】	1
FlexAlign	Start【开始】 Center【中心】 End【结尾】 SpaceBetween【平均往两边对齐 】 SpaceAround【平均居中】 SpaceEvenly【平均分布】	2
ItemAlign[这个一定要主要提示的参数是不是这个纵向的侧轴不长这样】	Auto Start Center End Baseline Stretch	3
FlexWrap【弗莱克斯外朴：wrap对应的一个属性它里面集成了一些关于换行的方法】	NoWrap Wrap WrapReverse

下面我们来做一个实战案例来展示一下

效果图如下

实现代码

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

  build() {
    Flex({direction:FlexDirection.Row,
    justifyContent:FlexAlign.SpaceAround,
    alignItems:ItemAlign.Center,
      wrap:FlexWrap.Wrap
    }){
      //Flex布局
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)

    }
    .backgroundColor(Color.Pink)
    .width('100%')
  }
}

 

在arkUI中，我们的内容如果超过了屏幕显示，则不会显示滚动条，需要使用Scroll来包裹

需要注意的是： 该组件滚动的前提是主轴方向大小小于内容大小。子组件不要设置高度，否则不能滚动