HarmonyOS ArkUI容器类组件-弹性布局容器（Flex）

最新推荐文章于 2024-05-22 18:04:39 发布

小米椒……

最新推荐文章于 2024-05-22 18:04:39 发布

阅读量244

点赞数 5

分类专栏： HarmonyOS 移动开发鸿蒙开发文章标签： harmonyos Openharmony 移动开发鸿蒙开发媒体

本文链接：https://blog.csdn.net/m0_71263309/article/details/138079479

版权

移动开发同时被 3 个专栏收录

105 篇文章 2 订阅

订阅专栏

鸿蒙开发

105 篇文章 0 订阅

订阅专栏

HarmonyOS

11 篇文章 0 订阅

订阅专栏

ArkUI 开发框架为了方便开发者实现灵活的页面布局方式，提供了弹性布局 Flex ，它用来为盒装模型提供最大的灵活性。 Flex 和 Row 、 Column 组件一样，也有主轴和纵轴之分。

Flex定义介绍

interface FlexInterface {
  (value?: FlexOptions): FlexAttribute;
}

declare interface FlexOptions {
  direction?: FlexDirection;
  wrap?: FlexWrap;
  justifyContent?: FlexAlign;
  alignItems?: ItemAlign;
  alignContent?: FlexAlign;
}

value：设置子组件的排列样式， FlexOptions 定义了以下几种样式：
- direction：设置子组件的的排列方向即主轴方向， FlexDirection 定义了以下4种排列方式：
  - Row（默认值）：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由左向右排列。

           Flex({direction: FlexDirection.Row}) {
             Text('Text1')
               .fontSize(16)
               .padding(10)
               .backgroundColor("#aabbcc")
             Text('Text2')
               .fontSize(16)
               .padding(10)
               .backgroundColor("#bbaacc")
             Text('Text3')
               .fontSize(16)
               .padding(10)
               .backgroundColor("#ccaabb")
             Text('Text4')
               .fontSize(16)
               .padding(10)
               .backgroundColor("#abcabc")
           }
           .width('100%')
           .height(60)
           .backgroundColor(Color.Pink)

样例运行结果如下图所示：

RowReverse：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由右向左排列。

            Flex({direction: FlexDirection.RowReverse}) {
              Text('Text1')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#aabbcc")
              Text('Text2')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#bbaacc")
              Text('Text3')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#ccaabb")
              Text('Text4')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#abcabc")
            }
            .width('100%')
            .height(60)
            .backgroundColor(Color.Pink)

样例运行结果如下图所示：

Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。

            Flex({direction: FlexDirection.Column}) {
              Text('Text1')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#aabbcc")
              Text('Text2')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#bbaacc")
              Text('Text3')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#ccaabb")
              Text('Text4')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#abcabc")
            }
            .width('100%')
            .height(220)
            .backgroundColor(Color.Pink)

样例运行结果如下图所示：

ColumnReverse：子组件竖直排列，即主轴为垂直方向，起点在下边，子组件由下到上排列。

            Flex({direction: FlexDirection.ColumnReverse}) {
              Text('Text1')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#aabbcc")
              Text('Text2')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#bbaacc")
              Text('Text3')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#ccaabb")
              Text('Text4')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#abcabc")
            }
            .width('100%')
            .height(220)
            .backgroundColor(Color.Pink)

样例运行结果如下图所示：

wrap：设置子组件是单行/列还是多行/列排序， FlexWrap 提供了以下3种类型：
- NoWrap（默认值）：子组件单行/列排序，子组件不允许超出容器。

        Flex({direction: FlexDirection.Row, wrap: FlexWrap.NoWrap}) {
          Text('Text1')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#abcabc")
          Text('Text5')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#cabcab")
          Text('Text6')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)

Wrap：子组件多行/列排序，子组件允许超出容器。

WrapReverse：子组件反向多行/列排序，子组件允许超出容器。

Flex({direction: FlexDirection.Row, wrap: FlexWrap.WrapReverse}) {
  Text('Text1')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#abcabc")
  Text('Text5')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text6')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#cabcab")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

justifyContent：设置子组件在主轴上的对齐方式， FlexAlign 提供了以下 6 种对齐方式：
- Start（默认值）：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。

Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start}) {
  Text('Text1')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

Text('Text1')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。

Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.End}) {
  Text('Text1')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

SpaceBetween： Flex 主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween}) {
          Text('Text1')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)

SpaceAround： Flex 主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。

        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround}) {
          Text('Text1')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)

SpaceEvenly： Flex 主轴方向元素等间距布局，相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly}) {
          Text('Text1')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)

alignItems：设置子组件在纵轴方向上的排列方式， ItemAlign 定义了以下 6 种排列方式：
- Auto：自动布局，简单样例如下所示：

Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Auto}) {
  Text('Text1')
    .fontSize(16)
    .size({width: 50, height: 20})
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .size({width: 60, height: 30})
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .size({width: 70, height: 40})
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .size({width: 80, height: 50})
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

运行结果如下所示：

Start：起始对齐，简单样例如下所示：

    Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Start}) {
      Text('Text1')
        .fontSize(16)
        .size({width: 50, height: 20})
        .backgroundColor("#aabbcc")
      Text('Text2')
        .fontSize(16)
        .size({width: 60, height: 30})
        .backgroundColor("#bbaacc")
      Text('Text3')
        .fontSize(16)
        .size({width: 70, height: 40})
        .backgroundColor("#ccaabb")
      Text('Text4')
        .fontSize(16)
        .size({width: 80, height: 50})
        .backgroundColor("#abcabc")
    }
    .width('100%')
    .height(60)
    .backgroundColor(Color.Pink)

Center：居中对齐，简单样例如下所示：

    Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}) {
      Text('Text1')
        .fontSize(16)
        .size({width: 50, height: 20})
        .backgroundColor("#aabbcc")
      Text('Text2')
        .fontSize(16)
        .size({width: 60, height: 30})
        .backgroundColor("#bbaacc")
      Text('Text3')
        .fontSize(16)
        .size({width: 70, height: 40})
        .backgroundColor("#ccaabb")
      Text('Text4')
        .fontSize(16)
        .size({width: 80, height: 50})
        .backgroundColor("#abcabc")
    }
    .width('100%')
    .height(60)
    .backgroundColor(Color.Pink)

End：末尾对齐，简单样例如下所示：

Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.End}) {
  Text('Text1')
    .fontSize(16)
    .size({width: 50, height: 20})
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .size({width: 60, height: 30})
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .size({width: 70, height: 40})
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .size({width: 80, height: 50})
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

Baseline：基线对齐，简单样例如下所示：

        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Baseline}) {
          Text('Text1')
            .fontSize(16)
            .size({width: 50, height: 20})
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .size({width: 60, height: 30})
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .size({width: 70, height: 40})
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .size({width: 80, height: 50})
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)

*   **Stretch（默认值）**：

        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Stretch}) {
          Text('Text1')
            .fontSize(16)
            .size({width: 50, height: 20})
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .size({width: 60, height: 30})
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .size({width: 70, height: 40})
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .size({width: 80, height: 50})
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)

alignContent：当纵轴有额外的空间时，多行内容的对齐方式。该属性仅在 wrap 属性为 Wrap 或者 WrapReverse 时才生效， FlexAlign 定义了以下 6 种对齐方式：
Start（默认值）：设置子组件在纵轴方向首部对齐。

        Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start}) {
          Text('Text1')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(120)
        .backgroundColor(Color.Pink)

Center：设置子组件在纵轴方向居中对齐。

Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center}) {
  Text('Text1')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#abcabc")
}
.width('100%')
.height(120)
.backgroundColor(Color.Pink)

End：设置子组件在纵轴方向尾部对齐。

    Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End}) {
      Text('Text1')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#aabbcc")
      Text('Text2')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#bbaacc")
      Text('Text3')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#ccaabb")
      Text('Text4')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#abcabc")
    }
    .width('100%')
    .height(120)
    .backgroundColor(Color.Pink)

SpaceBetween：设置子组件在纵轴方向等间距布局。

    Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween}) {
      Text('Text1')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#aabbcc")
      Text('Text2')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#bbaacc")
      Text('Text3')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#ccaabb")
      Text('Text4')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#abcabc")
    }
    .width('100%')
    .height(120)
    .backgroundColor(Color.Pink)

SpaceAround：设置子组件在纵轴方向间距布局，并且首尾子组件到 Flex 的间距是子组件间距的一半。

Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround}) {
  Text('Text1')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#abcabc")
}
.width('100%')
.height(120)
.backgroundColor(Color.Pink)

SpaceEvenly：设置子组件在纵轴方向等间距布局，并且首尾子组件到 Flex 的间距子组件之间的间距都相等。

        Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly}) {
          Text('Text1')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(120)
        .backgroundColor(Color.Pink)

小结

本节简单介绍了 Flex 的使用方式，它的使用很灵活，读者熟练掌握各属性的渲染特性后可以根据设置参数构建出复杂的UI布局。

码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线。大家可以进行参考学习：https://qr21.cn/FV7h05

①全方位，更合理的学习路径：
路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入理解鸿蒙开发原理！

②多层次，更多的鸿蒙原生应用：
路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。

③实战化，更贴合企业需求的技术点：
学习路线图中的每一个技术点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正理解和掌握。

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：`https://qr21.cn/FV7h05`

如何快速入门：

基本概念
构建第一个ArkTS应用
……

开发基础知识：https://qr21.cn/FV7h05

应用基础知识
配置文件
应用数据管理
应用安全管理
应用隐私保护
三方应用调用管控机制
资源分类与访问
学习ArkTS语言
……

基于ArkTS 开发：https://qr21.cn/FV7h05

Ability开发
UI开发
公共事件与通知
窗口管理
媒体
安全
网络与链接
电话服务
数据管理
后台任务(Background Task)管理
设备管理
设备使用信息统计
DFX
国际化开发
折叠屏系列
……

鸿蒙开发面试真题（含参考答案）：`https://qr21.cn/FV7h05`

大厂鸿蒙面试题：：`https://qr18.cn/F781PH`

鸿蒙开发面试大盘集篇（共计319页）：`https://qr18.cn/F781PH`

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

小米椒……

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HarmonyOS ArkUI容器类组件-弹性布局容器（Flex）

(value?direction?wrap?: FlexWrap;alignItems?value：设置子组件的排列样式，direction：设置子组件的的排列方向即主轴方向，Row（默认值）：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由左向右排列。RowReverse：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由右向左排列。Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。
复制链接

扫一扫