鸿蒙开发之ArkUI 界面篇 十九 Flex组件的特点

其语法格式是:

Flex(参数对象){

字组件1,

字组件2,

字组件3,

字组件4

}

这里你会发现，其实和Row容器，Colum容器的语法格式差不多，核心的关键是Colum、Row是不支持换行，实现FlexInterface接口，对外提供的属性是FlexOptions提供的,方向是FlexDirection的值提供，默认是从左往右，主轴对其方式仍然是justifyContent,交叉轴对其方式alignItems，换行wrap。核心代码如下，如果需求变，适当调整就行

 实现下面效果：

，

垂直方向，外层容器是Colum，上面是Text，下面是Flex+Text，代码如下:

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('学习选择').fontSize(30).fontWeight(777).padding(15).width('100%')

      Flex({
        // direction:FlexDirection.Row,
        // justifyContent:FlexAlign.Start,//主轴方向
        // alignItems:ItemAlign.Center,  //交叉轴方向
        wrap:FlexWrap.Wrap

      }){
        Text('ArKUI')
          .fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)


        Text('ArKTS')
          .fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)

        Text('界面开发')
          .fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)

        Text('系统能力')
          .fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)

        Text('权限控制')
          .fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)

        Text('元服务')
          .fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)
      }.width('100%')

  }
}
}

总结：Flex组件的特点是可以换行，也可以指定方向，垂直方向或者是水平方向，默认是水平方向，指定方向是FlexDirection，对其方式也分为主轴对其和交叉轴对其方式，也可以指定还不换行，不换行的效果就是垂直布局或者是线性布局