鸿蒙 Next 共享工具库 App 开发实战：社区共享 + 借还系统 + 分类筛选

鸿蒙 Next 共享工具库 App 开发实战：社区共享 + 借还系统 + 分类筛选

作者：duluo
SDK 版本：HarmonyOS API 24 (Next)
开发工具：DevEco Studio
语言框架：ArkTS + ArkUI
字数：约 9600 字

目录

1. 引言
2. 产品概念与工具模型
3. 两 Tab 架构设计
4. 工具卡片组件
5. 分类筛选系统
6. 借还系统与状态管理
7. 详情弹窗中的内联访问
8. 社区属性与评分系统
9. 编译错误全记录
10. 第三十六款 App 全景回顾
11. 结语

1. 引言

1.1 工具共享的社区价值

一把电钻每年平均使用时间不到 30 分钟。一个梯子一年用不了 5 次。一台高压清洗机用完后大半年闲置在角落。

这些东西家家都有、家家都需要，但使用频率极低。从经济角度看，购买这些工具的成本远高于单次使用的价值。从社区角度看，如果这些工具能在邻里之间共享，所有人的生活成本都会降低。

社区共享工具库的核心理念就是：与其每家买一件，不如共享一个工具库。

1.2 本 App 的定位

本 App 与"二手流转"（App 35）共享相同的"社区共享"基因，但核心机制不同：

1.3 三十六款 App 全景

App 数量： 36 代码总行数： ~19,400 行 编译错误数： ~312 个 博客总字数： ~360,000 字 技术博客数： 36 篇

2. 产品概念与工具模型

2.1 功能需求

用户故事 1：我想看看邻居们分享了哪些工具可以借 用户故事 2：我想按分类筛选工具 用户故事 3：我想借一把电钻用两天 用户故事 4：我用完了想归还 用户故事 5：我想看看谁提供了工具 功能清单： ├── F1: 工具列表（10 件工具） ├── F2: 分类标签筛选 ├── F3: 工具卡片（名称/主人/距离/状态） ├── F4: 借出工具 ├── F5: 归还工具 ├── F6: 借还记录列表 ├── F7: 详情弹窗 └── F8: 评分展示

2.2 工具数据模型

interfaceTool{id:number;name:string;// 工具名称emoji:string;// 图标owner:string;// 主人（如"301室 张叔"）dist:string;// 距离/位置status:string;// 状态（"可借"/"出借中"）desc:string;// 描述tag:string;// 分类rating:number;// 评分（1-5）}

9 个字段比"二手流转"的 Item 模型多了一个status字段。status是一个字符串，但只有两个可能的值：“可借"和"出借中”。

为什么用字符串而不是布尔：字符串的扩展性更强。后续如果增加"维修中"、"已下架"等状态，不需要修改代码逻辑。

2.3 10 件工具的社区感设计

所有工具的主人以"301室 张叔"、“502室 李哥"这样的社区身份标识，而不是"用户A”、“用户B”。这种设计传递了一个信息：这些工具是真实的邻居在共享，不是虚拟平台在运营。

3. 两 Tab 架构设计

3.1 Tab 配置

build(){Stack(){Column().backgroundColor(C.bg)Column(){this.buildHeader()if(this.activeTab===0)this.buildBrowseTab()elsethis.buildMyTab()this.buildTabBar()}if(this.showDetail)this.buildDetailOverlay()}}

3.2 首页布局

┌──────────────────────────────┐ │ 🤝 共享让生活更美好 │ │ 把闲置的工具借给邻居… │ ├──────────────────────────────┤ │ [全部] [工具] [清洁] [园艺] │ ├──────────────────────────────┤ │ 🔧 电钻 │ │ 301室张叔 · 同楼 可借 │ │ 充电式手电钻… │ │ 工具 ⭐⭐⭐⭐⭐ 📩 借出 │ ├──────────────────────────────┤ │ 🪜 梯子 │ │ 502室李哥 · 同楼 可借 │ │ ... │ └──────────────────────────────┘

3.3 数据流

浏览 Tab → 筛选 → 工具列表 → 点击详情 ↓ 借出 → borrowed 数组更新 → 状态变为"已借出" ↓ 我的 Tab → 显示已借出工具 → 点击"归还" ↓ 归还 → borrowed 数组移除 → 首页状态恢复

借出和归还是双向的——借出在首页操作，归还在我的 Tab 操作。两个 Tab 通过同一个borrowed数组保持状态同步。

4. 工具卡片组件

4.1 卡片布局

┌──────────────────────────────────────┐ │ 🔧 可借 │ │ 电钻 │ │ 301室张叔 · 同楼 │ │ │ │ 充电式手电钻，带一套钻头。 │ │ │ │ 工具 ⭐⭐⭐⭐⭐ 📩 借出 │ └──────────────────────────────────────┘

顶部行：左侧 emoji，右侧状态标签（"可借"绿色 / "出借中"灰色）
中间行：名称 + 主人/距离
描述行：2 行限制
底部行：左侧分类标签 + 评分，右侧操作按钮

4.2 状态标签

Text(tool.status).fontSize(13).fontColor(tool.status==='可借'?C.accent:C.textMuted).fontWeight(tool.status==='可借'?FontWeight.Bold:FontWeight.Normal)

"可借"使用绿色粗体，"出借中"使用灰色普通体。视觉权重差异明显。

4.3 操作按钮

if(tool.status==='可借'){// 显示"借出"或"已借出"按钮Text(this.isBorrowed(tool.id)?'✅ 已借出':'📩 借出')}else{// 显示灰色"出借中"文字Text('⏳ 出借中').fontSize(13).fontColor(C.textMuted)}

三态按钮：可借 + 未借出 → 橙色"📩 借出"按钮；可借 + 已借出 → 绿色"✅ 已借出"标签；出借中 → 灰色文字。

5. 分类筛选系统

5.1 标签配置

constTAGS:string[]=['全部','工具','清洁','园艺'];

4 个标签覆盖 10 件工具的分类：工具（5 件）、清洁（3 件）、园艺（2 件）。

5.2 筛选逻辑

getFiltered():Tool[]{if(this.selectedTag===0)returnTOOLS;constresult:Tool[]=[];for(consttofTOOLS){if(t.tag===TAGS[this.selectedTag])result.push(t);}returnresult;}

与"二手流转"（App 35）的筛选逻辑完全相同。这个方法被 ForEach 和详情弹窗两处调用。

6. 借还系统与状态管理

6.1 状态设计

@Stateborrowed:number[]=[];

一维数组存储已借出工具的 ID。

6.2 借出

borrowTool(id:number):void{this.borrowed=[id,...this.borrowed];promptAction.showToast({message:'📩 已借出！用时请爱惜，用完及时还'});}

Toast 提示中包含了"用时请爱惜，用完及时还"的善意提醒——不是在说教，而是在提醒共享的规则。

6.3 归还

returnTool(id:number):void{constidx=this.borrowed.indexOf(id);if(idx>=0){constb=this.borrowed.concat([]);b.splice(idx,1);this.borrowed=b;promptAction.showToast({message:'✅ 已归还！感谢你的诚信'});}}

归还操作是借出的逆操作：找到索引 → 创建数组副本 → 移除 → 赋值新数组。concat([])创建新引用触发 @State 更新。

6.4 我的 Tab 中的归还卡片

🔧 电钻 📩 已借出 来自 301室张叔 ✅ 记得及时归还哦 归还

每张已借出卡片底部有"归还"按钮（暖橙色），点击后工具从borrowed数组移除，首页卡片状态恢复。

7. 详情弹窗中的内联访问

7.1 内联模式

Text(this.getFiltered()[this.selectedTool].emoji).fontSize(64)Text(this.getFiltered()[this.selectedTool].name).fontSize(22)Text('⭐ '+this.getFiltered()[this.selectedTool].rating+'分')Text('👤 '+this.getFiltered()[this.selectedTool].owner)Text(this.getFiltered()[this.selectedTool].desc)

详情弹窗中所有数据通过this.getFiltered()[this.selectedTool].xxx内联访问。重复了 8 次this.getFiltered()[this.selectedTool]。

这种模式的优缺点：

优点：

• 零错误——没有 const 声明，不会触发 10905209
• 调用getFiltered()确保了数据始终与当前分类筛选一致
• 不需要额外的 Helper 方法

缺点：

• 代码重复——同一表达式写 8 次
• 可读性稍差——需要从长表达式中提取出具体字段

8. 社区属性与评分系统

8.1 评分展示

getStars(r:number):string{return'⭐'.repeat(r);}

String.repeat()是 ES6 标准方法，ArkTS 支持。'⭐'.repeat(5)生成'⭐⭐⭐⭐⭐'。

与常规的"4.2 分"数字评分不同，星级评分更适合社区场景——星越多越受欢迎，简单直观。

8.2 主人身份展示

每件工具都标注了主人信息："301室 张叔"、"502室 李哥"。距离标注："同楼"、"3号楼"、"物业"。

居委会有自己的工具（“社区公用工具箱”），评分 5 星。这个细节传递了"社区支持"的信息——共享不是个别热心人的行为，而是社区在推动的事情。

9. 编译错误全记录

9.1 错误概览

本 App 出现3 个编译错误。

9.2 重复方法错误

// ❌ 错误代码：buildBorrowCard 被定义了两次@BuilderbuildBorrowCard(id:number){// 完整实现...}@BuilderbuildBorrowCard(id:number){}// ❌ 第二次定义（空的）

原因：在从"二手流转"App 迁移代码时，buildBorrowCard方法被复制了两次。第二次是一个空的 Builder 方法（占位符），忘记删除了。

修复：删除空的 Builder 方法。

9.3 三十六款 App 的错误趋势

App 1: 16 ← 入门 App 10: 11 ← 模式形成 App 20: 2 ← 高效期 App 24: 48 ← AI 探索 App 31: 0 ← 零错误 App 33: 0 ← 零错误 App 34: 1 ← Text 类型 App 35: 3 ← Builder const App 36: 3 ← 重复方法

App 36 的 3 个错误不是"新的知识"，而是"旧的垃圾代码"。修复方式也不是学习新的 ArkTS 规则，而是——删掉多余的代码。

10. 第三十六款 App 全景回顾

10.1 数据总览

10.2 共享/平台类 App 系列总结

从 App 23 到 App 36，共享/平台类 App 共 5 款：

共享类 App 的平均代码量约 345 行——远低于系列平均值 546 行。原因是共享类 App 的逻辑路径简洁（浏览→操作），不需要复杂的用户系统或内容创建系统。

10.3 社区属性的价值

5 款共享类 App 中，本 App 是唯一一款强调"社区"概念的：

• 23 📩 匿名漂流瓶 — 陌生人
• 29 🎓 反向导师 — 陌生师生
• 32 🥪 临期食品救援 — 消费者 vs 商家
• 35 🔄 二手流转 — 陌生人
• 36 🔧 共享工具库 —同社区邻居

“301室 张叔”、“502室 李哥”——这些不是系统生成的用户名，而是模拟了真实社区中的身份标识。当你知道工具的主人是楼下 301 室的张叔时，你更有可能爱惜工具、及时归还。

11. 结语

11.1 36 款 App 的旅程

从第 1 款 App（白噪音）到第 36 款（共享工具库），横跨了工具、教育、社交、情感、健康、环保、公益、平台等近 10 个领域。

每一款 App 都解决了一个特定的问题——有些工具很实用（慢病管理、碳足迹），有些偏观念普及（防骗雷达、临期食品救援），有些纯属实验（AI 树洞）。

36 款 App 没有什么宏大的主题——就是一个个独立的、小而美的概念验证。

11.2 给开发者的建议

1. 重复方法是最容易避免的错误——写代码时留意是否复制了同名方法
2. 共享类 App 的代码量不需要很多——345 行平均，比系列总平均低 37%
3. 社区属性是最好的信用系统——"301室 张叔"比"用户 #12345"更能让人产生信任感
4. 36 款 App 证明了 ArkUI 的能力边界——从白噪音到共享工具库，ArkUI 都做得来

11.3 致谢

36 款 App、36 篇博客。36 不是终点。

每一款 App 都有一个博客，每一个博客都记录了一款 App 从零到一的完整过程。如果你从第 1 篇读到了第 36 篇——你已经见证了超过 19,000 行代码、312 个编错误、360,000 字的开发记录。

现在，打开 DevEco Studio，去创造属于你自己的第 1 款——或者第 36 款——App 吧。

附录 A：核心代码速查

借出工具

borrowTool(id:number):void{this.borrowed=[id,...this.borrowed];promptAction.showToast({message:'📩 已借出！'});}

归还工具

returnTool(id:number):void{constidx=this.borrowed.indexOf(id);if(idx>=0){constb=this.borrowed.concat([]);b.splice(idx,1);this.borrowed=b;}}

分类筛选

getFiltered():Tool[]{if(this.selectedTag===0)returnTOOLS;constresult:Tool[]=[];for(consttofTOOLS){if(t.tag===TAGS[this.selectedTag])result.push(t);}returnresult;}