HarmonyOS开发实战：小分享-HomePage首页三段式架构设计

前言三段式架构Header 内容 BottomTab是移动应用最经典的页面骨架。本篇以小分享 App 的HomePage为例讲解 Header Scroll BottomTabBar 三段式架构的实现涵盖布局容器、对齐方式、layoutWeight 权重等核心概念。详细 API 可参考 HarmonyOS ArkUI 布局官方文档。一、HomePage 完整代码1.1 HomePage.ets 全文小分享 App 的pages/HomePage.ets如下import router from ohos.router; import { BottomTabBar } from ../components/BottomTabBar; import { CategoryItem, RecentItem } from ../common/interfaces; Entry Component struct HomePage { State currentTab: number 0; private categories: ArrayCategoryItem [ { icon: , label: 文字, color: #5B8DEF, bg: #EEF4FF, page: pages/TextEditPage }, { icon: ️, label: 图片, color: #4CAF50, bg: #E8F5E9, page: pages/ImageEditPage }, { icon: , label: 链接, color: #2196F3, bg: #E3F2FD, page: pages/LinkEditPage }, { icon: , label: 笔记, color: #9C27B0, bg: #F3E5F5, page: pages/TextEditPage }, { icon: , label: 模板, color: #FF9800, bg: #FFF3E0, page: pages/TemplateSelectPage }, { icon: ⭐, label: 收藏, color: #F44336, bg: #FFEBEE, page: pages/FavoritesPage } ]; private recentItems: ArrayRecentItem [ { title: 生活的美好, image: ️ }, { title: 山川湖海, image: }, { title: 天地有爱, image: } ]; build() { Column() { // Header Row() { Text(小分享) .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor(#1A1A1A) .layoutWeight(1) Text() .fontSize(22) .margin({ right: 16 }) .onClick(() { router.pushUrl({ url: pages/DiscoverPage }); }) } .width(100%) .padding({ left: 20, right: 20, top: 12, bottom: 12 }) .backgroundColor(Color.White) Scroll() { Column({ space: 20 }) { // Banner // ... Banner 区 // Category grid // ... 分类网格 // Recent section // ... 最近使用 } .padding({ bottom: 80 }) } .layoutWeight(1) .scrollBar(BarState.Off) BottomTabBar({ currentIndex: 0 }) } .width(100%) .height(100%) .backgroundColor(#F5F5F5) } }二、三段式架构设计2.1 整体结构HomePage 整体结构如下Column (主容器) ├─ Row (Header) - 固定高度 ├─ Scroll (内容区) - layoutWeight(1) 撑开 └─ BottomTabBar (底部导航) - 固定高度2.2 三段式架构优势三段式架构优势如下职责清晰Header 显示标题内容区显示业务底部导航提供入口复用性强Header 和 BottomTabBar 可在不同页面复用布局稳定固定头部和底部内容区自适应可扩展性每个区域可独立替换或扩展提示三段式架构适用于列表页、详情页、个人中心等大多数页面。三、Header 实现解析3.1 Header 完整代码Header 完整代码如下Row() { Text(小分享) .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor(#1A1A1A) .layoutWeight(1) Text() .fontSize(22) .margin({ right: 16 }) .onClick(() { router.pushUrl({ url: pages/DiscoverPage }); }) } .width(100%) .padding({ left: 20, right: 20, top: 12, bottom: 12 }) .backgroundColor(Color.White)3.2 layoutWeight 权重机制layoutWeight(1)让左侧 Text 占满剩余空间右侧搜索图标固定宽度Row 总宽 屏幕宽 ├─ Text(小分享) - layoutWeight(1) 撑开 └─ Text() - 自适应宽度3.3 padding 内边距padding 用于控制 Header 内边距.padding({ left: 20, right: 20, top: 12, bottom: 12 })各方向边距说明如下方向值作用left20左侧留白right20右侧留白top12顶部留白bottom12底部留白四、Scroll 内容区实现4.1 Scroll 完整代码Scroll 完整代码如下Scroll() { Column({ space: 20 }) { // Banner 区 Column() { // ... Banner 内容 } .width(100%) .backgroundColor(#FFF8F0) .borderRadius(16) .margin({ left: 16, right: 16, top: 16 }) // 分类网格 Row({ space: 0 }) { ForEach(this.categories, (item: CategoryItem, index: number) { // ... 分类项 }, (item: CategoryItem, index: number) ${item.label}) } .width(100%) .padding({ left: 16, right: 16 }) // 最近使用 Column({ space: 12 }) { // ... 最近使用项 } .width(100%) .padding({ left: 16, right: 16 }) } .padding({ bottom: 80 }) } .layoutWeight(1) .scrollBar(BarState.Off)4.2 Scroll 核心属性Scroll 核心属性如下属性作用示例值layoutWeight(1)撑开剩余空间1scrollBar(BarState.Off)隐藏滚动条Offscrollable(ScrollDirection.Vertical)纵向滚动Vertical4.3 Column space 间距Column({ space: 20 })让子元素之间有 20vp 的垂直间距Column({ space: 20 }) { // 子元素1 // 子元素2 // 子元素3 }提示space只作用于相邻子元素之间不影响首尾元素的外边距。五、Banner 营销位实现5.1 Banner 完整代码Banner 完整代码如下Column() { Row() { Column({ space: 8 }) { Text(分享美好生活) .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor(#1A1A1A) Text(记录感动瞬间) .fontSize(14) .fontColor(#666666) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) Text(️) .fontSize(48) } .width(100%) .padding(20) } .width(100%) .backgroundColor(#FFF8F0) .borderRadius(16) .margin({ left: 16, right: 16, top: 16 })5.2 视觉设计要点视觉设计要点如下背景色#FFF8F0暖色调营造温馨感圆角borderRadius(16)较大圆角更柔和外边距margin({left:16, right:16, top:16})与边缘留白内边距padding(20)内容与边框留白layoutWeight(1)左侧文字撑开右侧 emoji 固定5.3 alignItems 对齐方式alignItems(HorizontalAlign.Start)让子元素左对齐Column({ space: 8 }) { Text(分享美好生活) ← 左对齐 Text(记录感动瞬间) ← 左对齐 }六、六宫格分类导航6.1 分类网格代码分类网格代码如下Row({ space: 0 }) { ForEach(this.categories, (item: CategoryItem, index: number) { Column({ space: 6 }) { Column() { Text(item.icon) .fontSize(24) } .width(48) .height(48) .backgroundColor(item.bg) .borderRadius(12) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) Text(item.label) .fontSize(12) .fontColor(#333333) } .width(16.66%) .alignItems(HorizontalAlign.Center) .onClick(() { router.pushUrl({ url: item.page }); }) }, (item: CategoryItem, index: number) ${item.label}) } .width(100%) .padding({ left: 16, right: 16 })6.2 六等分宽度width(16.66%)让每个分类项占 1/6 宽度屏幕宽 / 6 16.66%6.3 ForEach key 生成ForEach 的第三个参数是 key 生成器ForEach(this.categories, (item: CategoryItem, index: number) { // ... }, (item: CategoryItem, index: number) ${item.label})提示key 应当稳定且唯一避免使用 index 作为 key因为列表项位置变化时 index 会变。七、最近使用横向列表7.1 完整代码最近使用横向列表代码如下Column({ space: 12 }) { Row() { Text(最近使用) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#1A1A1A) .layoutWeight(1) Text(›) .fontSize(18) .fontColor(#CCCCCC) } .width(100%) .padding({ left: 16, right: 16 }) Row({ space: 12 }) { ForEach(this.recentItems, (item: RecentItem, index: number) { Column() { Column() { Text(item.image) .fontSize(40) } .width(100%) .height(120) .backgroundColor(#F0F0F0) .borderRadius(12) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) Text(item.title) .fontSize(12) .fontColor(#666666) .margin({ top: 8 }) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .width(30%) .alignItems(HorizontalAlign.Center) }, (item: RecentItem, index: number) ${item.title}) } .width(100%) .padding({ left: 16, right: 16 }) .justifyContent(FlexAlign.SpaceBetween) } .width(100%) .padding({ left: 16, right: 16 })7.2 文字省略文字省略配置如下.maxLines(1) // 最多 1 行 .textOverflow({ overflow: TextOverflow.Ellipsis }) // 溢出显示省略号7.3 三栏均分三栏均分配置如下Row({ space: 12 }) ├─ Column.width(30%) ← 第 1 栏 ├─ Column.width(30%) ← 第 2 栏 └─ Column.width(30%) ← 第 3 栏 空间分配30% 30% 30% 90%剩余 10% 用于 space: 12八、BottomTabBar 集成8.1 引入组件引入 BottomTabBar 组件import { BottomTabBar } from ../components/BottomTabBar;8.2 使用组件使用 BottomTabBar 组件BottomTabBar({ currentIndex: 0 })currentIndex: 0表示当前选中第一个 Tab首页。提示BottomTabBar 的实现将在第 21-25 篇详细讲解。九、本篇核心知识点9.1 三段式架构核心要点三段式架构核心要点总结如下Column 作为主容器Row 作为 HeaderlayoutWeight(1) 控制布局Scroll 作为内容区layoutWeight(1) 撑开BottomTabBar 作为底部导航9.2 关键 ArkUI 属性关键 ArkUI 属性总结如下width(100%)/height(100%)百分比尺寸layoutWeight(1)权重分配剩余空间padding/margin内外边距borderRadius圆角alignItems/justifyContent对齐方式总结本文详细讲解了 HarmonyOS HomePage 首页的三段式架构设计结合小分享 App 的实际代码演示了 Header、Scroll、BottomTabBar 三段的实现。下一篇我们将深入 ArkUI 布局容器 Column 与 Row 的对齐与权重。相关资源HarmonyOS ArkUI 布局官方文档Layout ReferenceHarmonyOS Column 组件Column ComponentHarmonyOS Row 组件Row ComponentHarmonyOS Scroll 组件Scroll Component开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netHarmonyOS Flex 布局Flex LayoutHarmonyOS layoutWeight 文档Layout Weight如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力