羽球联盟 HarmonyOS NEXT 实战系列 (03/20)：四Tab首页容器与资讯首屏搭建

文章导读

• 主入口使用 Tabs 固定底部导航，首页、资讯、发现、我的各自保持页面自治。
• HomePage 首屏由顶部标题、搜索框、Banner、金刚区和最新资讯列表组成。
• Refresh 包裹 Scroll，让下拉刷新和内容滚动在同一页面里协作。

页面效果

首屏应直接可用：用户能看到搜索入口、Banner、功能宫格和最新资讯，底部 Tab 切换不会打断当前页面状态。

实战拆解

移动资讯类应用的首屏要承担两个任务：快速说明应用是什么，同时把用户带到常用入口。羽球联盟的首页没有做复杂营销页，而是直接进入可用界面：顶部标题和通知入口、搜索框、Banner、四宫格功能入口、最新资讯列表。

入口页面 的 Tabs 是整个应用的一级导航。这里把 EventListPage 和 PlayerFeedPage 以 embedded 模式放进 Tab，说明同一个业务页既可以作为独立路由页，也可以嵌在首页 Tab 中复用。这是一个很适合写进文章的设计点。

HomePage 使用 @StorageProp 读取 remote_articles，如果联网刷新已有数据则优先展示远程资讯，否则回退到内置 ARTICLES。这个逻辑让首页在没有网络、首次启动、刷新失败时都能有内容，不会出现空白首屏。

关键代码

Tabs({ barPosition: BarPosition.End, index: this.currentIndex }) { TabContent() { HomePage() } TabContent() { EventListPage({ embedded: true }) } TabContent() { PlayerFeedPage({ embedded: true }) } TabContent() { ProfilePage() } } .scrollable(false) .barMode(BarMode.Fixed)

Tabs 的价值在于稳定承载一级导航，scrollable 关闭后，底部入口不会随着内容滑动产生额外状态。

取舍分析

这里的取舍可以从两个方向看：一边要让当前页面足够直观，用户打开后能马上理解入口、状态和反馈；另一边要给后续迭代留下余量，避免把数据处理、视觉样式和跳转逻辑全部写死在同一个地方。Tabs 适合承载稳定一级导航，页面之间不要互相知道内部状态。 Refresh 与 Scroll 同时存在时，要保证下拉区域和内容滚动互不抢事件。

设计落点

• Tabs 适合承载稳定一级导航，页面之间不要互相知道内部状态。
• Refresh 与 Scroll 同时存在时，要保证下拉区域和内容滚动互不抢事件。
• 远程资讯和内置资讯应有优先级，避免刷新失败造成空白首屏。

易踩坑

• Refresh、Scroll、Column 嵌套时要明确 layoutWeight，否则容易出现内容不能铺满或下拉区域不响应。
• 底部 Tab 图标颜色应由 currentIndex 驱动，避免每个 Tab 独立维护选中态。

验证方式

• 下拉刷新首页，确认加载状态能正常开始和结束。
• 快速切换底部 Tab，确认首页内容不会异常重置。
• 无网络时确认首屏仍有资讯内容。

小结

四Tab首页容器与资讯首屏搭建 的价值在于把页面现象和工程边界放在一起看：用户看到的是流畅的入口、列表、详情和反馈，开发者真正维护的是状态、模型和组件之间的关系。这个思路迁移到其他 ArkTS 项目时，比单独记某个 API 更可靠。