HarmonyOS开发实战：小分享-CategoryIcon组件封装与图标徽章复用

前言CategoryIcon是小分享 App 中可复用的图标徽章组件用于展示分类图标。通过 Component 和 Prop 封装可在多个页面中复用。本篇讲解图标徽章组件的封装技巧。详细 API 可参考 HarmonyOS Component 官方文档。一、CategoryIcon 组件Component export struct CategoryIcon { Prop icon: string ; Prop bgColor: string #EEF4FF; Prop size: number 48; build() { Column() { Text(this.icon) .fontSize(this.size * 0.5) } .width(this.size) .height(this.size) .backgroundColor(this.bgColor) .borderRadius(this.size * 0.25) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } }二、使用示例CategoryIcon({ icon: , bgColor: #EEF4FF, size: 48 })三、组件设计原则3.1 参数化设计属性类型默认值说明iconstring‘’图标 EmojibgColorstring‘#EEF4FF’背景色sizenumber48尺寸3.2 响应式计算.fontSize(this.size * 0.5) // 字号 尺寸 × 0.5 .borderRadius(this.size * 0.25) // 圆角 尺寸 × 0.25四、本文核心知识点4.1 组件封装核心要点Component Prop 封装参数化设计设置默认值响应式计算字号和圆角4.2 实战开发要点尺寸参数化支持不同场景默认值避免组件独立使用时出错响应式计算提升适配性附录CategoryIcon 组件的完整实现细节1. 完整的组件代码Component export struct CategoryIcon { Prop icon: string ; Prop bgColor: string #EEF4FF; Prop size: number 48; build() { Column() { Text(this.icon).fontSize(this.size * 0.5) } .width(this.size) .height(this.size) .backgroundColor(this.bgColor) .borderRadius(this.size * 0.25) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } }2. 参数化设计属性类型默认值说明iconstring‘’图标 EmojibgColorstring‘#EEF4FF’背景色sizenumber48尺寸宽高3. 响应式计算.fontSize(this.size * 0.5) // 字号 尺寸 × 0.5 .borderRadius(this.size * 0.25) // 圆角 尺寸 × 0.254. 使用示例CategoryIcon({ icon: , bgColor: #EEF4FF, size: 48 }) CategoryIcon({ icon: ️, bgColor: #E8F5E9, size: 40 }) CategoryIcon({ icon: , bgColor: #E3F2FD, size: 56 })5. 完整代码文件索引文件路径说明components/CategoryIcon.ets图标徽章组件6. 实现要点总结CategoryIcon 组件核心要点Component Prop封装可复用的图标徽章组件参数化设计icon、bgColor、size 三个参数响应式计算字号和圆角根据 size 自动计算7. 总结本文详细讲解了 CategoryIcon 图标徽章组件的封装涵盖 Component、Prop、参数化设计等核心知识点。相关资源HarmonyOS Component 官方文档Component ReferenceHarmonyOS Prop 装饰器Prop GuideHarmonyOS 组件封装Component EncapsulationHarmonyOS Builder 装饰器Builder GuideHarmonyOS borderRadius 属性BorderRadiusHarmonyOS Column 组件Column ComponentHarmonyOS Text 组件Text Reference开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net本文涉及的所有 API 索引API类别用途Column布局容器垂直排列子组件Row布局容器水平排列子组件Text基础组件显示文本ForEach渲染控制循环渲染列表State装饰器组件内状态管理Builder装饰器封装可复用 UI 片段router.pushUrl路由页面跳转router.back路由返回上一页总结本文详细讲解了小分享 App 中对应页面的完整实现。核心知识点涵盖布局容器、组件封装、状态管理、路由跳转等关键技术。通过本文的学习读者可以掌握 HarmonyOS ArkUI 声明式开发的核心技能并能够独立实现类似的页面功能。14. 页面功能总结功能模块实现方式核心组件组件封装Component Prop参数化设计图标徽章Column 容器borderRadius 响应式计算参数传递Prop 装饰器icon/bgColor/size默认值函数参数默认值组件独立可用15. 完整的代码结构CategoryIcon (Component) ├── Prop icon: string ├── Prop bgColor: string #EEF4FF ├── Prop size: number 48 └── build() └── Column (size × size) ├── backgroundColor(bgColor) ├── borderRadius(size × 0.25) └── Text(icon) └── fontSize(size × 0.5)16. 组件使用方法// 基本使用 CategoryIcon({ icon: , bgColor: #EEF4FF, size: 48 }) // 自定义尺寸 CategoryIcon({ icon: ️, bgColor: #E8F5E9, size: 40 }) // 使用默认值 CategoryIcon({ icon: })17. 本文涉及的所有 APIAPI/组件用途文档链接Component组件声明ComponentProp属性传递PropColumn列容器ColumnText文本组件TextborderRadius圆角BorderRadiusjustifyContent主轴对齐FlexAlignalignItems交叉轴对齐FlexAlign18. 实现要点总结CategoryIcon 组件核心要点Component Prop封装可复用的图标徽章组件参数化设计icon、bgColor、size 三个参数均有默认值响应式计算字号和圆角根据 size 自动计算无需手动设置居中布局justifyContent(Center)alignItems(Center)居中默认值bgColor默认#EEF4FFsize默认 4819. 总结本文详细讲解了 CategoryIcon 图标徽章组件的封装涵盖 Component、Prop、参数化设计等核心知识点。组件封装是提升代码复用率的关键手段良好的参数化设计可以让组件在不同场景下灵活使用。导航与路由 Router API 深入20. 完整代码文件索引文件路径说明components/CategoryIcon.ets图标徽章组件21. 本文涉及的所有 APIAPI/组件用途文档链接Component组件声明ComponentProp属性传递PropColumn列容器ColumnText文本组件TextborderRadius圆角BorderRadiusjustifyContent主轴对齐FlexAlignalignItems交叉轴对齐FlexAlign22. 实现要点总结CategoryIcon 组件核心要点Component Prop封装可复用的图标徽章组件参数化设计icon、bgColor、size 三个参数均有默认值响应式计算字号和圆角根据 size 自动计算居中布局justifyContent(Center)alignItems(Center)默认值bgColor默认#EEF4FFsize默认 4823. 总结本文详细讲解了 CategoryIcon 图标徽章组件的封装涵盖 Component、Prop、参数化设计等核心知识点。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力