个人主页→VON
收录专栏→鸿蒙开发小型案例总结
基础语法部分会发布于github 和 gitee上面（暂未发布）
前言
在鸿蒙（HarmonyOS）开发中，Flex布局是一种非常有用的布局方式，它允许开发者创建灵活且响应式的用户界面。Flex布局基于弹性盒子模型，使得UI组件能够根据屏幕尺寸或其他条件动态调整大小和位置。
知识点概述
Flex容器属性
- direction：定义主轴的方向，即子组件的排列方向。
FlexDirection.Row：子组件沿水平方向从左至右排列。FlexDirection.RowReverse：子组件沿水平方向从右至左排列。FlexDirection.Column：子组件沿垂直方向从上至下排列。FlexDirection.ColumnReverse：子组件沿垂直方向从下至上排列。
- wrap：定义当子组件无法全部显示在同一行或列时是否换行。
FlexWrap.NoWrap：不允许换行。FlexWrap.Wrap：允许换行。FlexWrap.WrapReverse：允许换行并反转换行的方向。
Flex子项属性
- flex：定义子组件在主轴上的伸缩能力。
- alignSelf：定义子组件在交叉轴上的对齐方式。
- basis：定义子组件的初始大小。
Flax示例
@Entry
@Component
struct Index {build() {// Flex默认主轴水平向右，交叉轴垂直往下// 1.主轴方向：direction// direction:FlexDirection.Row / Column// 2.主轴对齐方式：justifyContent// justifyContent:FlexAlign.SpaceAround// 3.交叉轴对齐方式：alignItems// alignItems:ItemAlign.Stretch / Start / Center / End// 单行或者单列的情况，优先还是使用线性布局（本质基于Flex设计的，且还做了性能优化）// 4.布局换行：wrap// FlexWrap.Wrap 换行// FlexWrap.NoWrap 不换行// Flex布局：伸缩布局。当子盒子的总和溢出父盒子，默认进行压缩显示Flex(){Text().width(80).height(80).backgroundColor(Color.Pink).border({width:1,color:Color.Blue})Text().width(80).height(80).backgroundColor(Color.Pink).border({width:1,color:Color.Blue})Text().width(80).height(80).backgroundColor(Color.Pink).border({width:1,color:Color.Blue})}.width(300).height(300).backgroundColor('#5f9a5c')}
}界面效果展示
代码展示
@Entry
@Component
struct Index {build() {Column(){Text('阶段练习').fontSize(30).fontWeight(700).padding(15)Flex({wrap:FlexWrap.Wrap}){Text('ArkUI').padding(10).backgroundColor('#f1f1f1').margin(5)Text('ArkTS').padding(10).backgroundColor('#f1f1f1').margin(5)Text('界面开发').padding(10).backgroundColor('#f1f1f1').margin(5)Text('系统能力').padding(10).backgroundColor('#f1f1f1').margin(5)Text('权限控制').padding(10).backgroundColor('#f1f1f1').margin(5)Text('元服务').padding(10).backgroundColor('#f1f1f1').margin(5)}}}
}
