行业资讯
HarmonyOS7 弹性布局实战：Flex 组件让我告别了嵌套地狱
文章目录为什么用 Flex基础概念速览实战案例一等分布局实战案例二比例布局实战案例三换行布局踩坑记录写在最后为什么用 Flex上次重构一个设置页面我写了六层嵌套——Row套ColumnColumn再套Row改一个间距要翻半天代码。同事看了一眼说“你这代码是俄罗斯套娃吧”说实话那一刻我意识到不会用 Flex写布局就是在折磨自己。HarmonyOS7 的 Flex 弹性布局组件真的是我用过最爽的布局方案之一。今天就来聊聊怎么用它告别嵌套地狱。传统布局的痛点太明显了Row/Column 只有一个方向遇到既需要水平又需要垂直的场景就得套娃对齐靠 margin 硬凑改一处动全身自适应差不同屏幕尺寸得写多套布局Flex 组件把方向、对齐、分布、换行这些能力打包在一起一个组件顶三个 Row/Column 嵌套。打个比方Row/Column 就像只有直道的公路Flex 是有立交桥的高速——想去哪直接走不用绕来绕去。基础概念速览先看看 Flex 跟 Row、Column 到底啥区别特性RowColumnFlex主轴方向水平垂直自由指定子组件对齐单一方向单一方向主轴交叉轴换行支持无无支持 FlexWrap比例分配无无支持 flexGrow嵌套需求复杂布局需多层复杂布局需多层一层搞定划重点Flex 最大的优势是方向自由换行比例分配这三个能力组合起来能覆盖 90% 的布局场景。实战案例一等分布局最常见的场景——几个按钮等分一行空间。EntryComponentstruct EqualLayout{build(){Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){ForEach([首页,发现,消息,我的],(item:string){Text(item).width(25%).height(48).textAlign(TextAlign.Center).backgroundColor(#f1f1f1).borderRadius(8)})}.width(100%).height(56).padding({left:16,right:16})}}关键代码讲解direction: FlexDirection.Row—— 指定主轴方向为水平子组件从左到右排列alignItems: ItemAlign.Center—— 交叉轴这里是垂直方向居中对齐.width(25%)—— 每个子组件占 25%四个刚好等分用 Row 也能做等分但 Flex 的好处是——后续要加对齐、间距不用改结构加个属性就行。实战案例二比例布局不是所有场景都等分比如侧边栏占 1 份内容区占 3 份。这时候flexGrow就派上用场了。EntryComponentstruct RatioLayout{build(){Flex({direction:FlexDirection.Row}){Text(侧边栏).flexGrow(1).height(100%).backgroundColor(#e8e8e8).textAlign(TextAlign.Center)Text(内容区).flexGrow(3).height(100%).backgroundColor(#ffffff).textAlign(TextAlign.Center)}.width(100%).height(400)}}关键代码讲解.flexGrow(1)—— 侧边栏占 1 份剩余空间.flexGrow(3)—— 内容区占 3 份剩余空间两者比例 1:3不管屏幕多宽比例永远一致说白了flexGrow就是按比例瓜分剩余空间的分蛋糕机制。谁设的数字大谁分得多。如果某个组件不设 flexGrow它就只占自身内容大小不参与分蛋糕。实战案例三换行布局标签列表、商品筛选这类场景——标签数量不确定一行放不下要自动换行。这是 Row 做不到的。EntryComponentstruct WrapLayout{Statetags:string[][ArkTS,ArkUI,Flex,布局,组件,状态管理,导航,动画,手势,网络请求]build(){Flex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap}){ForEach(this.tags,(tag:string){Text(tag).height(36).fontSize(14).padding({left:16,right:16}).margin({right:8,bottom:8}).backgroundColor(#f0f0f0).borderRadius(18)})}.width(100%).padding(16)}}关键代码讲解wrap: FlexWrap.Wrap—— 开启换行子组件超出宽度自动换到下一行.margin({ right: 8, bottom: 8 })—— 标签间距用 margin 控制简单直接FlexWrap.NoWrap默认不换行子组件会被压缩或溢出这个换行能力是 Flex 的杀手级功能。之前用 Row 做标签列表要么写死每行几个要么自己算换行逻辑——现在一个属性搞定。踩坑记录用 Flex 踩过的几个坑分享出来帮你避雷flexGrow 和 width 同时设会冲突设了flexGrow就别再设固定width否则 flexGrow 会被忽略。这是最容易犯的错。alignItems 和子组件 alignSelf 别搞混alignItems是 Flex 容器级别的对齐所有子组件统一生效alignSelf是子组件级别的可以覆盖容器的 alignItems。需要某个子组件特殊对齐时用 alignSelf。FlexDirection.Reverse 的坑FlexDirection.RowReverse会让子组件从右到左排列但ForEach 的顺序不变视觉顺序和逻辑顺序相反处理点击事件时要小心。嵌套 Flex 性能没问题两层 Flex 嵌套是完全 OK 的别为了避免嵌套硬把所有逻辑塞一层。合理嵌套 强行平铺。写在最后Flex 组件本质上就是 HarmonyOS7 版的 CSS Flexbox概念完全一致。如果你有 Web 开发经验上手基本零成本。没有也没关系记住这三个核心direction—— 子组件往哪个方向排justifyContent—— 主轴怎么分布alignItems—— 交叉轴怎么对齐掌握这三个日常布局够用了。遇到换行和比例分配的场景Flex 就是最佳选择。别再写 Row 套 Column 的俄罗斯套娃了试试 Flex你会回来谢我的。
郑州网站建设
网页设计
企业官网
