鸿蒙多功能工具箱开发实战(三)-分类页面与工具卡片组件

发布时间：2026/9/21 3:28:33

鸿蒙多功能工具箱开发实战(三)-分类页面与工具卡片组件
鸿蒙多功能工具箱开发实战(三)-分类页面与工具卡片组件前言工具卡片是应用的核心UI组件承载着工具的展示和入口功能。本文将详细讲解如何设计一个美观、交互友好的工具卡片组件以及如何使用Grid网格布局实现分类页面的展示。一、工具卡片设计分析1.1 功能需求展示工具图标、名称、描述支持自定义主题色点击跳转到对应工具页面视觉效果圆角、阴影、点击态1.2 UI设计图 1 亲戚称呼计算器┌─────────────────────────────┐ │ │ │ ‍‍‍ │ │ │ │ 亲戚称呼计算器 │ │ │ │ 计算亲戚关系的称呼 │ │ │ └─────────────────────────────┘二、工具卡片组件实现2.1 组件定义创建components/ToolCard.ets/** * 工具卡片组件 */Componentexportstruct ToolCard{Propname:stringPropicon:stringPropdescription:stringPropcolor:string#4A90E2onCardClick:()void(){}build(){Column(){// 图标区域Column(){Text(this.icon).fontSize(40)}.width(60).height(60).borderRadius(30).backgroundColor(this.color20).justifyContent(FlexAlign.Center).margin({top:16})// 名称Text(this.name).fontSize(16).fontWeight(FontWeight.Medium).fontColor(#333333).margin({top:12})// 描述Text(this.description).fontSize(12).fontColor(#999999).margin({top:4,bottom:16}).maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})}.width(100%).backgroundColor(#FFFFFF).borderRadius(12).shadow({radius:8,color:#1A000000,offsetY:2}).onClick((){this.onCardClick()})}}图 2 亲戚计算页面2.2 关键技术点解析Prop 装饰器Prop用于父组件向子组件单向传递数据// 子组件定义Componentexportstruct ToolCard{Propname:stringPropicon:string}// 父组件使用ToolCard({name:亲戚称呼计算器,icon:‍‍‍})Prop vs Link 区别装饰器数据流向使用场景Prop父 → 子单向展示数据Link父 ↔ 子双向需要修改父组件数据颜色透明度处理// 字符串拼接16进制透明度.backgroundColor(this.color20)// #4A90E2 → #4A90E22016进制透明度参考100%: FF 90%: E6 80%: CC 70%: B2 60%: 99 50%: 80 40%: 66 30%: 4D 20%: 33 10%: 1A三、Grid网格布局3.1 Grid基本用法Grid(){GridItem(){Text(Item 1)}GridItem(){Text(Item 2)}GridItem(){Text(Item 3)}}.columnsTemplate(1fr 1fr)// 两列等宽.rowsGap(16)// 行间距.columnsGap(16)// 列间距.width(100%).height(300)3.2 列模板详解// 两列等宽.columnsTemplate(1fr 1fr)// 三列等宽.columnsTemplate(1fr 1fr 1fr)// 固定宽度 自适应.columnsTemplate(100px 1fr)3.3 使用ForEach渲染Grid(){ForEach(this.toolList,(tool:ToolItem){GridItem(){ToolCard({name:tool.name,icon:tool.icon,description:tool.description,color:tool.color,onCardClick:(){router.pushUrl({url:tool.route})}})}})}.columnsTemplate(1fr 1fr).rowsGap(16).columnsGap(16)四、分类页面实现4.1 计算工具页面import{ToolCard}from../components/ToolCardimportrouterfromohos.routerComponentexportstruct CalculatorPage{build(){Column(){Text(计算工具).fontSize(24).fontWeight(FontWeight.Bold).margin({top:20,bottom:20}).width(100%).padding({left:20})Grid(){GridItem(){ToolCard({name:亲戚称呼计算器,icon:‍‍‍,description:计算亲戚关系的称呼,color:#4A90E2,onCardClick:(){router.pushUrl({url:pages/calculator/RelativeCalculator})}})}GridItem(){ToolCard({name:日期计算器,icon:,description:计算日期间隔,color:#50C878,onCardClick:(){router.pushUrl({url:pages/calculator/DateCalculator})}})}GridItem(){ToolCard({name:开发进行中,icon:,description:更多工具开发中...,color:#B8B8B8,onCardClick:(){}})}}.columnsTemplate(1fr 1fr).rowsGap(16).columnsGap(16).width(100%).padding({left:16,right:16,bottom:20}).layoutWeight(1)}.width(100%).height(100%)}}4.2 使用ForEach简化代码Componentexportstruct ConvertPage{privateconvertTools[{name:长度换算,icon:,description:米、英尺等,color:#3498DB,route:pages/convert/LengthConvert},{name:重量换算,icon:⚖️,description:千克、磅等,color:#E67E22,route:pages/convert/WeightConvert},{name:面积换算,icon:,description:平方米、亩等,color:#1ABC9C,route:pages/convert/AreaConvert}]build(){Column(){Text(换算工具).fontSize(24).fontWeight(FontWeight.Bold).margin({top:20,bottom:20}).width(100%).padding({left:20})Grid(){ForEach(this.convertTools,(tool){GridItem(){ToolCard({name:tool.name,icon:tool.icon,description:tool.description,color:tool.color,onCardClick:(){router.pushUrl({url:tool.route})}})}})GridItem(){ToolCard({name:开发进行中,icon:,description:更多工具开发中...,color:#B8B8B8,onCardClick:(){}})}}.columnsTemplate(1fr 1fr).rowsGap(16).columnsGap(16).width(100%).padding({left:16,right:16,bottom:20}).layoutWeight(1)}.width(100%).height(100%)}}五、开发进行中占位卡片5.1 设计目的给用户持续更新的期待感填充网格空白保持视觉平衡可添加点击提示功能5.2 带提示弹窗版本GridItem(){ToolCard({name:开发进行中,icon:,description:更多工具开发中...,color:#B8B8B8,onCardClick:(){AlertDialog.show({title:敬请期待,message:新功能正在紧张开发中敬请期待,autoCancel:true,alignment:DialogAlignment.Center})}})}六、小结本文详细讲解了工具卡片组件和分类页面的实现核心要点✅ Prop 实现父子组件单向数据传递✅ Grid GridItem 实现网格布局✅ ForEach 循环渲染工具列表✅ 颜色透明度处理技巧✅ 文本溢出处理✅ 开发进行中占位卡片设计下一篇文章将讲解路由导航与页面跳转的实现。系列文章导航下期预告鸿蒙多功能工具箱开发实战(四)-路由导航与页面跳转

相关新闻

Free CAD 软件

Free CAD 软件

Free CAD 软件下载 给有需要的人 下载链接 windows选择Windows即可 也有mac的安装包 https://mirror.tuna.tsinghua.edu.cn/github-release/FreeCAD/FreeCAD/LatestRelease/

2026/9/10 7:50:03 阅读更多 →
双碳背景下中国环保企业参展的优势与价值探析

双碳背景下中国环保企业参展的优势与价值探析

随着全球“双碳”目标稳步落地、全球环境治理需求持续扩容，环保展会已然成为行业技术比拼、供需精准对接、品牌全球化布局的核心阵地。相较于海外同行，中国环保企业参展具备产业、产品、渠道、政策四大维度的独特优势，综合竞争力突出&#xf…

2026/9/19 6:05:28 阅读更多 →
Cadence打开会有当前页面脚本错误

Cadence打开会有当前页面脚本错误

解决：找到安装目录： D:\Cadence\Cadence_SPB_16.6-2015\tools\capture\tclscripts\capStartPage 找到文件 capStartPage.tcl ⚠️ 安全操作：不要直接删除，重命名，例如改成 capStartPage.tcl.bak 重启 OrCAD&#xff0c…

2026/9/19 7:47:25 阅读更多 →

最新新闻

react-admin 实时订阅实战：深入掌握 `useSubscribeToRecord` 单记录事件订阅 Hook

react-admin 实时订阅实战：深入掌握 `useSubscribeToRecord` 单记录事件订阅 Hook

react-admin 实时订阅实战：深入掌握 useSubscribeToRecord 单记录事件订阅 Hook 【免费下载链接】react-admin A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design 项目地址: https:/…

2026/9/21 3:27:56 阅读更多 →
在 Vue 3 应用中接入 json-render DevTools：@json-render/devtools-vue 完整接入与源码解析

在 Vue 3 应用中接入 json-render DevTools：@json-render/devtools-vue 完整接入与源码解析

在 Vue 3 应用中接入 json-render DevTools：json-render/devtools-vue 完整接入与源码解析 【免费下载链接】json-render The Generative UI framework 项目地址: https://gitcode.com/GitHub_Trending/js/json-render json-render/devtools-vue 是 json-ren…

2026/9/21 3:27:56 阅读更多 →
Etherpad 自更新子系统 Tier 3 深度解析：带宽限窗口的自动升级（Auto-Update with Grace Window）

Etherpad 自更新子系统 Tier 3 深度解析：带宽限窗口的自动升级（Auto-Update with Grace Window）

后端协同办公WebSocket前端富文本 【免费下载链接】etherpad Etherpad: A modern really-real-time collaborative document editor. 项目地址： https://gitcode.com/gh_mirrors/et/etherpad 点击查看 免费下载 Etherpad 内置的"自更新子系统"&#xff0…

2026/9/21 3:27:55 阅读更多 →
lark-cli apps +plugin-list 命令完全指南：妙搭应用插件声明与安装状态核验

lark-cli apps +plugin-list 命令完全指南：妙搭应用插件声明与安装状态核验

CLIAI 技能 【免费下载链接】cli The official Lark/飞书 CLI tool, maintained by the larksuite team — built for humans and AI Agents. Covers core business domains including Messenger, Docs, Base, Sheets, Calendar, Mail, Tasks, Meetings, and more, with 200 co…

2026/9/21 3:27:55 阅读更多 →
Gradle 属性命名规范 ADR-0010：org.gradle 前缀体系下的 public/internal 与特性稳定性契约

Gradle 属性命名规范 ADR-0010：org.gradle 前缀体系下的 public/internal 与特性稳定性契约

构建工具开发工具 【免费下载链接】gradle Adaptable, fast automation for all 项目地址： https://gitcode.com/gh_mirrors/gr/gradle 点击查看 免费下载 本文是 Gradle 仓库 architecture/standards/0010-gradle-properties-naming.md 这份架构决策记录&#xff…

2026/9/21 3:27:55 阅读更多 →
V8 字符串表示体系详解：从 SeqString 到 ConsString 的内部表示、internalization 与 String Table

V8 字符串表示体系详解：从 SeqString 到 ConsString 的内部表示、internalization 与 String Table

语言运行时编译器JIT编译解释器内存管理 【免费下载链接】v8 The official mirror of the V8 Git repository 项目地址： https://gitcode.com/gh_mirrors/v81/v8 点击查看 免费下载 导读 JavaScript 中的字符串是最基础的数据类型，V8 并没有使用单一的…

2026/9/21 3:26:55 阅读更多 →

日新闻

agents-generator 决策矩阵全解析：从项目检测到 AGENTS.md 规则生成的 16 步判定流程

agents-generator 决策矩阵全解析：从项目检测到 AGENTS.md 规则生成的 16 步判定流程

agents-generator 决策矩阵全解析：从项目检测到 AGENTS.md 规则生成的 16 步判定流程 【免费下载链接】agentic-awesome-skills AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and …

2026/9/21 0:00:01 阅读更多 →
gin-vue-admin 前端工具函数全景指南：src/utils 复用规范与源码级解析

gin-vue-admin 前端工具函数全景指南：src/utils 复用规范与源码级解析

gin-vue-admin 前端工具函数全景指南：src/utils 复用规范与源码级解析 【免费下载链接】gin-vue-admin 🚀ViteVue3Gin拥有AI辅助的基础开发平台，企业级业务AI开发解决方案，内置mcp辅助服务，内置skills管理，…

2026/9/21 0:00:01 阅读更多 →
Wox 全功能插件开发实战指南：基于 Python / Node.js 宿主与 WebSocket 的持久化插件体系

Wox 全功能插件开发实战指南：基于 Python / Node.js 宿主与 WebSocket 的持久化插件体系

桌面应用AI 应用插件系统 【免费下载链接】Wox A cross-platform launcher that simply works 项目地址： https://gitcode.com/gh_mirrors/wo/Wox 点击查看 免费下载 全功能插件（Full-featured Plugin）是 Wox 三类插件实现方式中能力最完整的…

2026/9/21 0:00:01 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事：用Flutter给OpenHarmony做一款游戏集合类的App，说白了就是把若干小游戏塞进一个壳里，用统一入口分发。这个方向本身不算新鲜，真正让我花了不少心思的，是首页那堆游戏卡…

2026/9/21 3:13:20 阅读更多 →
Word表格编号全攻略：从列表编号到题注交叉引用

Word表格编号全攻略：从列表编号到题注交叉引用

写Word文档，最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事：今天在表后面多加了两个空白行，明天给客户交稿前发现整个章节的编号全部错位，光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/21 2:19:36 阅读更多 →
从第一个站到第二个站：独立开发者的静态网站选型与落地实践

从第一个站到第二个站：独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年，说实话，第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年，流量惨淡、功能臃肿、代码自己都懒得看第二遍之后，我才慢慢琢磨明白一个道理：第一个网站是练手&…

2026/9/20 0:00:46 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能分类：[AI/大模型]细分主题：AI 增强型 CI/CD 流水线自动化与 GitOps 实践：Agent 工作流、工具调用与任务拆解：从原型到生产的验收清单很多团队在尝试用大…

2026/9/19 23:01:36 阅读更多 →
容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场分类：[工程技术]细分主题：Kubernetes 生产环境运维与排障实战：可复制的项目复盘模板与决策记录大部分团队的事故复盘报告，最后都变成了躺在 Confluence 或钉…

2026/9/19 17:50:38 阅读更多 →
容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步分类：[工程技术]细分主题：Docker 容器化技术与镜像安全管理：核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用（包含 Web 接口、后台…

2026/9/19 23:35:34 阅读更多 →