新手友好】3 分钟搞懂 ArkTS 中的 Flex 布局

✨ 从 “盒子模型” 到 “自动换行”一文看懂大家好今天跟大家唠唠 ArkTS 里用得最多的 Flex 布局新手入门必看看完再也不担心页面乱成麻了一、Flex 布局是什么简单说它就是一个 “弹性盒子”里面的子元素可以自动按行或按列排列还能自动换行、均匀分布做导航栏、标签页、商品列表都超方便核心参数就这几个direction子元素排列方向Row 水平 /Column 垂直wrap是否自动换行Wrap 超出宽度就换行justifyContent主轴方向的对齐方式居中 / 两端对齐二、直接上代码可复制运行typescript运行EntryComponentstruct FlexDemo {build() {Column({ space: 20 }) {// 1. 水平均匀分布导航栏Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {Button(首页).width(80).height(40)Button(分类).width(80).height(40)Button(我的).width(80).height(40)}.width(100%)// 2. 自动换行标签页Flex({ wrap: FlexWrap.Wrap }) {Text(鸿蒙基础).padding(15).backgroundColor(0xE8F4FF).borderRadius(5).margin(5)Text(ArkTS语法).padding(15).backgroundColor(0xE8F4FF).borderRadius(5).margin(5)Text(ArkUI布局).padding(15).backgroundColor(0xE8F4FF).borderRadius(5).margin(5)Text(组件开发).padding(15).backgroundColor(0xE8F4FF).borderRadius(5).margin(5)}.width(100%).padding(10)}.padding(20)}}三、新手避坑小 Tips子元素宽度总和超过父容器宽度时记得设置 wrap: FlexWrap.Wrap不然会挤成一团justifyContent: FlexAlign.SpaceAround 会让子元素均匀分布在主轴上做导航栏超好用。垂直居中可以配合 alignItems: ItemAlign.Center 实现不用手动算边距。学会这招再也不用为页面布局秃头啦# 鸿蒙开发 #ArkTS #前端入门