HarmonyOS应用开发实战萌宠日记 - 空白占位与 Flex 布局前言在萌宠日记的布局设计中空白占位和弹性布局是两个至关重要的概念。Blank()组件用于弹性占位将内容推到容器两端Flex组件用于灵活排列支持换行和自适应间距。这两个组件共同构成了 ArkUI 中弹性布局的核心能力。本文将从萌宠日记中 Blank 和 Flex 的实际使用出发深入解析弹性占位原理、Flex 布局模式以及如何利用它们构建灵活自适应的界面。一、Blank 组件在萌宠日记中的应用1.1 使用场景统计使用场景代码位置作用首页标题栏HomePage.ets标题居中左右对称宠物信息卡片HomePage.ets将信息推到左侧编辑按钮推到右侧健康提醒标题HomePage.ets标题左对齐添加按钮右对齐今日记录标题HomePage.ets标题左对齐时间右对齐闪屏页SplashPage.ets在 Column 中实现垂直居中分布社区页CommunityPage.etsTab 标题左对齐搜索右对齐1.2 核心用法// 用法一Row 中将元素推到两端 Row() { Text(今日记录) // 左侧 .fontSize(16) .fontWeight(FontWeight.Bold) Blank() // 弹性占位占据所有剩余空间 Text(10:30) // 右侧 .fontSize(12) .fontColor(#999999) } .width(100%) // 用法二Column 中实现垂直居中分布 Column() { Blank() // 上弹性空间 Text(萌宠日记) // 居中内容 .fontSize(36) Blank() // 下弹性空间 } .width(100%) .height(100%)提示Blank 是 ArkUI 中实现弹性布局的核心组件它会自动占据父容器的所有剩余空间。多个 Blank 会等分剩余空间这是实现内容居中分布的关键机制。二、Blank 的工作原理2.1 剩余空间分配父容器宽度 360vp ┌─────────────────────────────────────┐ │ 今日记录 Blank() 10:30 │ │ ← 固定宽度 → ← 剩余空间 → ← 固定宽度 → │ └─────────────────────────────────────┘2.2 多个 Blank 的分配// 多个 Blank 等分剩余空间 Row() { Blank() // 占 1 份 Text(中) // 固定宽度 Blank() // 占 1 份 } // 结果左侧 Blank 和右侧 Blank 宽度相等文字居中 // 3 个 Blank 等分 Column() { Blank() // 占 1 份 Text(内容) Blank() // 占 1 份 Text(更多内容) Blank() // 占 1 份 }2.3 Blank 与其他布局方式的对比布局方式代码效果适用场景BlankRow() { Text(A); Blank(); Text(B) }A 左 B 右两端分布justifyContentRow().justifyContent(FlexAlign.SpaceBetween)子元素两端对齐多个子元素固定间距Row({ space: 16 })等间距间距固定layoutWeightlayoutWeight(1)等分宽度等宽分布三、Blank 在闪屏页中的应用3.1 垂直居中分布// SplashPage.ets — 使用 Blank 实现垂直居中 Column() { Blank() // 上部弹性空间 // Logo 和标题 Row({ space: 12 }) { Text().fontSize(48) Text(萌宠日记).fontSize(36) } Text(记录爱·陪伴成长) Blank() // 中部弹性空间 // 宠物插画 Column() { Text().fontSize(80) } .width(200).height(200) .backgroundColor(#FFF3E0) .borderRadius(100) Blank() // 下部弹性空间 // 开始按钮 Button(开始记录) .width(70%).height(48) Blank() // 底部弹性空间 } .width(100%) .height(100%)3.2 弹性分布效果┌─────────────────────────────┐ │ Blank() │ ← 弹性空间 │ │ │ 萌宠日记 │ ← 固定内容 │ 记录爱·陪伴成长 │ │ │ │ Blank() │ ← 弹性空间 │ │ │ [ 插画] │ ← 固定内容 │ │ │ Blank() │ ← 弹性空间 │ │ │ [ 开始记录 ] │ ← 固定内容 │ │ │ Blank() │ ← 弹性空间 └─────────────────────────────┘四、Flex 组件的应用4.1 Flex 换行布局// CommunityPage.ets — 热门话题标签云 Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.hotTopics, (topic: TopicItem) { Text(topic.label) .fontSize(13) .fontColor(#F5A623) .padding({ left: 12, right: 12, top: 8, bottom: 8 }) .backgroundColor(topic.color) .borderRadius(16) .margin({ right: 8, bottom: 8 }) }) } .width(100%)4.2 Flex 布局参数参数类型萌宠日记配置说明wrapFlexWrapFlexWrap.Wrap允许换行directionFlexDirection默认Row主轴方向justifyContentFlexAlign默认Start主轴对齐alignItemsItemAlign默认Start交叉轴对齐alignContentFlexAlign默认Start多行对齐五、FlexWrap 换行模式5.1 三种换行模式// 不换行默认 Flex({ wrap: FlexWrap.NoWrap }) { // 所有子元素在一行可能溢出 } // 换行 Flex({ wrap: FlexWrap.Wrap }) { // 子元素自动换行 ✅ 萌宠日记使用 } // 反向换行 Flex({ wrap: FlexWrap.WrapReverse }) { // 子元素从下往上换行 }5.2 标签云效果Flex(wrap: Wrap) ┌─────────────────────────────────────┐ │ [# 我家宠物的日常] [# 萌宠表情包] │ │ [# 宠物成长对比] [# 新手养宠攻略] │ │ [# 宠物医疗] [# 宠物美容] │ └─────────────────────────────────────┘六、FlexDirection 方向控制6.1 主轴方向// 水平排列默认 Flex({ direction: FlexDirection.Row }) { // 子元素水平排列 } // 垂直排列 Flex({ direction: FlexDirection.Column }) { // 子元素垂直排列 } // 水平反向 Flex({ direction: FlexDirection.RowReverse }) { // 子元素从右到左排列 } // 垂直反向 Flex({ direction: FlexDirection.ColumnReverse }) { // 子元素从下到上排列 }七、Flex 对齐方式7.1 主轴对齐// 主轴对齐方式 Flex({ justifyContent: FlexAlign.Start }) // 左对齐默认 Flex({ justifyContent: FlexAlign.Center }) // 居中对齐 Flex({ justifyContent: FlexAlign.End }) // 右对齐 Flex({ justifyContent: FlexAlign.SpaceBetween }) // 两端对齐 Flex({ justifyContent: FlexAlign.SpaceAround }) // 均匀分布 Flex({ justifyContent: FlexAlign.SpaceEvenly }) // 等间距分布7.2 常见对齐效果对齐方式Row 效果Column 效果Start左对齐顶部对齐Center居中对齐垂直居中End右对齐底部对齐SpaceBetween首尾贴边中间等距上下贴边中间等距SpaceAround每个元素两侧间距相等每个元素上下间距相等八、Blank 与 Flex 的对比8.1 适用场景场景推荐方案理由两端分布A 左 B 右Blank简单直接多个元素弹性分布Flex SpaceBetween更灵活标签云换行布局Flex Wrap必须使用 Flex垂直居中分布Blank多个 Blank 等分空间等宽分布layoutWeight更精确的宽度控制8.2 代码对比// 两端分布Blank 方式 Row() { Text(左) Blank() Text(右) } // 两端分布Flex 方式 Flex({ justifyContent: FlexAlign.SpaceBetween }) { Text(左) Text(右) } // 换行布局只能用 Flex Flex({ wrap: FlexWrap.Wrap }) { Text(标签1) Text(标签2) Text(标签3) }九、性能考量9.1 Blank 性能场景性能影响说明少量 Blank≤ 5 个无影响布局计算很快嵌套 Blank轻微避免多层嵌套动态 Blank无影响不涉及重绘9.2 Flex 性能场景性能影响说明Flex Wrap轻微换行计算大量子元素中等使用 LazyForEach 优化嵌套 Flex可感知避免多层嵌套十、最佳实践10.1 布局选择原则有序列表 — 弹性布局选择的 5 个原则两端分布用 BlankRow 中需要将两个元素推到两端时Blank 最简洁多元素分布用 Flex3 个以上元素需要分布时Flex 更灵活换行布局用 FlexWrap标签云、关键词列表必须使用 Flex Wrap等宽用 layoutWeight多个子元素需要等宽时layoutWeight 最精确垂直居中用 BlankColumn 中实现垂直居中分布多个 Blank 等分空间10.2 萌宠日记布局总结布局场景使用组件配置Row 两端分布BlankRow() { Text; Blank(); Text }垂直居中分布BlankColumn() { Blank(); Content; Blank() }标签云换行FlexFlex({ wrap: FlexWrap.Wrap })图标等宽layoutWeightlayoutWeight(1)导航栏等分layoutWeightlayoutWeight(1)总结本文从萌宠日记的Blank 和 Flex 布局实践出发深入解析了弹性布局的完整方法Blank 组件弹性占位占据剩余空间实现两端分布和垂直居中Blank 工作原理剩余空间分配、多个 Blank 等分闪屏页应用多个 Blank 实现垂直居中分布Flex 组件灵活排列支持换行和自适应间距FlexWrap 换行标签云布局的核心FlexDirection主轴方向控制对齐方式justifyContent 的 6 种模式Blank vs Flex适用场景对比和选择建议Blank 和 Flex 是 ArkUI 弹性布局的两大核心工具掌握它们能让你构建出灵活自适应的界面。下一篇我们将深入首页下拉刷新与骨架屏设计解析首页的加载体验优化方案。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Blank 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-blankFlex 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flexFlexWrap 枚举https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flex布局基础https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui-layoutRow 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-rowColumn 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column响应式布局https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/responsive-layout弹性布局指导https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/flex-layout