news 2026/6/25 16:42:58

HarmonyOS7 列表流实战 ----别急着改代码，先把示例工程真正跑通

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HarmonyOS7 列表流实战 ----别急着改代码，先把示例工程真正跑通

文章目录

      • 源码获取
      • 先搞清楚，这个工程到底在练什么
      • 版本先别卡死，先确认环境能打通
      • 工程导入以后，先盯住这几个文件
      • 为什么一启动就会进首页
      • 首页其实就是一张目录页
      • 工程跑起来以后，别只看首页
      • 真正容易卡住的，不是代码，而是这几个小坑
        • 1. 工程能打开，但运行不起来
        • 2. 页面能进，图片却没显示
        • 3. 首页能点，目标页不跳
        • 4. 模拟器和真机感觉不一样
      • 这一整套文章，最推荐的阅读顺序
      • 最后一句

源码获取

如果你想一边对照文章一边实操，建议直接把示例工程拉到本地。项目 Git 地址：https://gitcode.com/HarmonyOS_Samples/CommonListFlows。

很多人第一次打开示例工程，手比脑子快。

目录还没看明白，就先点进页面源码；源码还没看懂，又开始改样式。结果最基础的一步反而没做对: 工程到底有没有正常跑起来，四个场景是不是都能完整走通。

这件事听着土，但真别跳过。

因为这个项目后面讲的多类型列表、Tab 吸顶、分组吸顶、二级联动，全部都建立在“你已经能把工程稳定跑起来”这件事上。第一步没站稳，后面再努力，心里也是虚的。

先搞清楚，这个工程到底在练什么

CommonListFlows不是一个完整业务 App，它更像一本专门练List的习题册。

项目首页只做了一件事: 把 4 个常见列表流场景摆到你面前。

  • 多类型列表项场景
  • Tab 吸顶场景
  • 分组吸顶场景
  • 二级联动场景

这 4 页的价值不在于业务，而在于套路特别典型。你以后做资讯流、商城页、城市选择页、分类页，绕来绕去基本都逃不出这些结构。

如果你是刚碰 ArkUI 的小白，我建议别乱跳着学，就按首页顺序来。前面几页在给后面打地基，这个顺序不是随便摆的。

版本先别卡死，先确认环境能打通

仓库 README 里写的是 HarmonyOS 5.0.5 及以上。你这套教程标题统一带HarmonyOS7，这个没问题，但理解上别走偏。

更准确的说法是:文章按 HarmonyOS7 关键词来写，讲解按当前项目真实代码来拆。

也就是说，你现在最该确认的不是版本口号，而是这些东西有没有准备好:

  • DevEco Studio 能正常打开 HarmonyOS 工程
  • 本机可用 SDK 已经装好
  • 模拟器或真机至少有一个能运行

只要这些打通，后面练List、Navigation、Tabs、Scroller这些能力就是顺的。

工程导入以后，先盯住这几个文件

别一进项目就从头翻到尾，那样效率很低。

这个工程真正该先看的，是entry/src/main/ets下面这几块:

  • entryability/EntryAbility.ets：应用入口
  • pages/Index.ets：首页目录
  • pages/HomePage.ets：多类型列表
  • pages/ManagerPage.ets：Tab 吸顶
  • pages/CityList.ets：分组吸顶
  • pages/CategoryPage.ets：二级联动

如果你以前写 Web 喜欢先找main.ts，那到了 ArkUI 里，思路要稍微转一下。这里先抓EntryAbility和页面组件，效率会高很多。

为什么一启动就会进首页

入口代码其实很直白，关键就这一段:

exportdefaultclassEntryAbilityextendsUIAbility{onWindowStageCreate(windowStage:window.WindowStage):void{windowStage.loadContent('pages/Index',(err)=>{AppStorage.setOrCreate('uiContext',windowStage.getMainWindowSync().getUIContext())if(err.code){return}})}}

这里真正决定首屏的是loadContent('pages/Index')。

你先把这句记牢:程序起来以后，默认加载的是Index页面。

很多新手后面找不到页面入口，不是不会写页面，而是连“页面是从哪进来的”都没先确认。这一步看清楚，后面读项目会省很多劲。

首页其实就是一张目录页

Index.ets没有复杂业务，它就是把你送进四个场景页。

@Entry@Componentstruct Index{@Provide('pageInfo')pageInfo:NavPathStack=newNavPathStack()build(){Navigation(this.pageInfo){Column(){Button($r('app.string.multiple_types_list')).onClick(()=>this.pageInfo.pushPathByName('HomePage',null))Button($r('app.string.top_tab_list')).onClick(()=>this.pageInfo.pushPathByName('ManagerPage',null))Button($r('app.string.group_ceiling')).onClick(()=>this.pageInfo.pushPathByName('CityList',null))Button($r('app.string.secondary_linkage')).onClick(()=>this.pageInfo.pushPathByName('CategoryPage',null))}}}}

你可以把它当成一个训练导航页。

这一页最值得你先看懂的，不是按钮长什么样，而是四个页面之间的进入关系。路径一旦顺了，后面每篇教程你都会轻松不少。

工程跑起来以后，别只看首页

很多人把首页打开，看到界面出来了，就默认工程没问题。

这个判断太早了。

更稳的做法是把四个入口都点一遍，至少确认下面这些点:

  1. 多类型列表页能正常下拉、滑动和触底。
  2. Tab 吸顶页顶部搜索区、内容 Tab、底部 Tab 都能切换。
  3. 城市分组页标题能吸顶，右侧字母能点击跳转。
  4. 二级联动页左边分类和右边内容能同步滚动。

只要这四步都通，后面你再去拆源码，心里就是有底的。

真正容易卡住的，不是代码，而是这几个小坑

1. 工程能打开，但运行不起来

这种情况十有八九不是页面写错了，而是 SDK、签名或者运行设备没配对。别一上来怀疑源码，先检查环境。

2. 页面能进，图片却没显示

这个项目依赖resources/base/media里的图片资源。导入不完整、资源没同步，都会让你误以为页面写坏了。

3. 首页能点，目标页不跳

先别急着改逻辑，先核对pushPathByName()里的页面名有没有和实际页面保持一致。路由名写错，是最常见的低级坑。

4. 模拟器和真机感觉不一样

列表滚动、吸顶、嵌套滚动这种交互，对运行环境本来就敏感。我的建议很直接: 能上真机就尽量上真机。

这一整套文章，最推荐的阅读顺序

如果你真是从零开始，别一上来就啃二级联动。那页知识点最密，容易把人看烦。

更稳的顺序是这样:

  • 先把工程跑通
  • 再看首页入口和跳转关系
  • 再学HomePage的多类型列表骨架
  • 接着看刷新、加载更多和分组吸顶
  • 最后再攻 Tab 联动和左右联动

照着这个顺序走，难度会平很多。

最后一句

学这类示例工程，最怕两件事: 还没跑起来就急着改，页面能动了又不知道为什么能动。

这一篇的任务其实很朴素，就是先把项目跑通，把四个场景全部看全。别嫌这一步基础，它反而最值钱。基础没站稳，后面每一页你都会读得心里发虚；基础一旦站稳，后面那些看着复杂的页面，真的就没那么吓人了。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/6/25 16:42:40

3个必学技巧：用G-Helper彻底释放ROG Ally掌机潜能

3个必学技巧：用G-Helper彻底释放ROG Ally掌机潜能 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivobook, Zenbook, Expert…

作者头像 李华
网站建设 2026/6/25 16:42:18

成都企业如何选择AI智能体服务商？选型指南

一、引言成都制造业和研发型企业在数字化转型中，正面临一个核心问题：如何让AI真正落地到日常业务流程中，而不是停留在概念或演示阶段。数据分散在ERP、MES、PDM、BOM等不同系统，形成信息孤岛；业务知识快速迭代&#xf…

作者头像 李华
网站建设 2026/6/25 16:41:43

TscanCode静态代码分析引擎：多语言缺陷检测架构深度解析

TscanCode静态代码分析引擎：多语言缺陷检测架构深度解析 【免费下载链接】TscanCode A static code analyzer for C, C#, Lua 项目地址: https://gitcode.com/gh_mirrors/ts/TscanCode TscanCode作为腾讯开源的静态代码分析工具，在C/C、C#和Lua代…

作者头像 李华
网站建设 2026/6/25 16:41:12

16VIN,1A,耐高压LDO,XZ1117N

产品概述这是一款高精度，低噪声的LDO稳压器。这款芯片最高输入达16V，输出电压有固定输出和可调输出，输出电压在1.2V-5.0V之间。内置输出电流限制电路，误差修正电路及相位补偿电路，热关断保护电路。常有的封装有SOT223,…

作者头像 李华
网站建设 2026/6/25 16:39:08

2026 年企业级大模型 API 中转服务选型参考：六大平台技术特性与企业适配性深度解析

随着大语言模型从实验性探索迈入工业化落地，AI 基础设施的选型已成为技术负责人的核心考量。API 聚合平台作为衔接底层算力与上层应用的关键中间件，其服务的确定性、协议的标准化程度以及运维的可观测性，直接决定了 AI 项目的投产效率。2026 …

作者头像 李华
网站建设 2026/6/25 16:34:52

3秒搞定网页图片格式转换：Chrome右键菜单终极解决方案

3秒搞定网页图片格式转换：Chrome右键菜单终极解决方案 【免费下载链接】Save-Image-as-Type Save Image as Type is an chrome extension which add Save as PNG / JPG / WebP to the context menu of image. 项目地址: https://gitcode.com/gh_mirrors/sa/Save-I…

作者头像 李华