【鸿蒙代码达人秀】鸿蒙6.0实战教程-聊天列表的实现

原创

视频通过一个完整的聊天列表Demo，手把手带你实战鸿蒙ArkUI的核心功能。你将学到： 1. 响应式核心：彻底搞懂 @State 如何驱动UI自动刷新，以及为何要用 chatList（原始数据）和 filteredList（显示数据）两个列表来管理状态。 2. 布局“神技” (重点)： ◦ 未读红点：学习如何使用 Stack（堆叠）配合 .position() 精确定位，实现头像右上角的“红点徽标”。 ◦ 两端对齐：用 FlexAlign.SpaceBetween 一招搞定昵称和时间的左右分离布局。 ◦ 弹性布局：利用 layoutWeight(1) 实现标题居中和列表区域自动撑满剩余空间。 3. 列表“黄金搭档”：掌握 List 与 ForEach 如何高效遍历并渲染动态数据列表。 4. 代码“洁癖”：学会用 @Builder 将UI（如头像）封装成可复用的“积木”，让 build 函数保持清爽。 5. 数据建模：了解如何使用 class 来定义 ChatItem 数据结构，为UI提供“蓝图”。