企业官网建设流程全解析

HarmonyOS应用开发实战：萌宠日记 - 空白占位与 Flex 布局

前言

在萌宠日记的布局设计中，空白占位和弹性布局是两个至关重要的概念。Blank()组件用于弹性占位，将内容推到容器两端；Flex组件用于灵活排列，支持换行和自适应间距。这两个组件共同构成了 ArkUI 中弹性布局的核心能力。

本文将从萌宠日记中 Blank 和 Flex 的实际使用出发，深入解析弹性占位原理、Flex 布局模式，以及如何利用它们构建灵活自适应的界面。

一、Blank 组件在萌宠日记中的应用

1.1 使用场景统计

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 与其他布局方式的对比

三、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 布局参数

五、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 常见对齐效果

八、Blank 与 Flex 的对比

8.1 适用场景

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 性能

9.2 Flex 性能

十、最佳实践

10.1 布局选择原则

有序列表 — 弹性布局选择的 5 个原则：

1. 两端分布用 Blank：Row 中需要将两个元素推到两端时，Blank 最简洁
2. 多元素分布用 Flex：3 个以上元素需要分布时，Flex 更灵活
3. 换行布局用 FlexWrap：标签云、关键词列表必须使用 Flex + Wrap
4. 等宽用 layoutWeight：多个子元素需要等宽时，layoutWeight 最精确
5. 垂直居中用 Blank：Column 中实现垂直居中分布，多个 Blank 等分空间

10.2 萌宠日记布局总结

总结

本文从萌宠日记的Blank 和 Flex 布局实践出发，深入解析了弹性布局的完整方法：

1. Blank 组件：弹性占位，占据剩余空间，实现两端分布和垂直居中
2. Blank 工作原理：剩余空间分配、多个 Blank 等分
3. 闪屏页应用：多个 Blank 实现垂直居中分布
4. Flex 组件：灵活排列，支持换行和自适应间距
5. FlexWrap 换行：标签云布局的核心
6. FlexDirection：主轴方向控制
7. 对齐方式：justifyContent 的 6 种模式
8. Blank vs Flex：适用场景对比和选择建议

Blank 和 Flex 是 ArkUI 弹性布局的两大核心工具，掌握它们能让你构建出灵活自适应的界面。

下一篇我们将深入首页下拉刷新与骨架屏设计，解析首页的加载体验优化方案。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• Blank 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-blank
• Flex 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flex
• FlexWrap 枚举：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flex
• 布局基础：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui-layout
• Row 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row
• Column 组件参考：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