前言Builder和Component是 ArkUI 中两种 UI 复用机制但它们各有适用场景。小分享 App 同时使用了这两种方式。本篇深入对比它们的差异帮助开发者做出正确选型。详细 API 可参考 HarmonyOS Builder 官方文档。一、Builder 装饰器1.1 定义 BuilderBuilderFeatureItem(icon:string,title:string,desc:string){Row({space:12}){Text(icon).fontSize(20)Column({space:2}){Text(title).fontSize(14).fontWeight(FontWeight.Medium).fontColor(#1A1A1A)Text(desc).fontSize(12).fontColor(#999999)}}}1.2 调用 Builderthis.FeatureItem(,多种内容分享,支持文字、图片、链接等多种内容)二、Component 装饰器2.1 定义组件Componentexportstruct ShareCard{Proptitle:string;Propsubtitle:string;Propicon:string;PropiconBg:string#EEF4FF;ProppageUrl:string;build(){Row(){/* ... */}}}2.2 使用组件ShareCard({title:文字分享,subtitle:记录想法分享文字,icon:,pageUrl:pages/TextEditPage})三、对比维度BuilderComponent复用粒度UI 片段完整组件状态管理共享外部状态独立状态调用方式this.xxx()标签调用参数函数参数Prop 装饰器生命周期无有独立预览否Preview 支持适用场景简单 UI 复用复杂独立组件四、选型建议4.1 使用 Builder 的场景// 简单 UI 片段无需独立状态BuilderToolItem(icon:string,label:string){Column({space:2}){Text(icon).fontSize(18)Text(label).fontSize(10).fontColor(#666666)}}// 无需外部引用的内联 UIBuilderTag(text:string){Text(text).fontSize(12).fontColor(#F5A623).padding({left:12,right:12,top:4,bottom:4}).backgroundColor(#FFF3E0).borderRadius(12)}4.2 使用 Component 的场景// 复杂 UI需要独立状态Componentexportstruct BottomTabBar{PropcurrentIndex:number0;// 多个 Prop 参数// 独立 build 方法}// 需要在多个页面复用的组件Componentexportstruct ShareCard{// 跨页面复用}五、本文核心知识点5.1 Builder 与 Component 对比BuilderUI 片段共享状态函数调用Component完整组件独立状态标签调用简单 UI 用 Builder复杂组件用 Component5.2 实战开发要点工具栏按钮、标签等用 Builder底部导航栏、分享卡片等用 Component需要独立预览的组件用 Preview相关资源HarmonyOS Builder 官方文档HarmonyOS Component 官方文档HarmonyOS Preview 装饰器开源鸿蒙跨平台社区附录Builder 与 Component 对比详解1. 完整对比表格对比维度BuilderComponent复用粒度UI 片段完整组件状态管理共享外部状态独立状态管理调用方式this.xxx()标签调用Component /参数传递函数参数Prop 装饰器生命周期无独立生命周期有独立生命周期独立预览不支持Preview 支持代码复用低高适用场景简单 UI 片段复杂独立组件2. Builder 使用场景// 工具栏按钮 - 适合 BuilderBuilderToolItem(icon:string,label:string){Column({space:2}){Text(icon).fontSize(18)Text(label).fontSize(10).fontColor(#666666)}.alignItems(HorizontalAlign.Center)}// 标签胶囊 - 适合 BuilderBuilderTag(text:string){Text(text).fontSize(12).fontColor(#F5A623).padding({left:12,right:12,top:4,bottom:4}).backgroundColor(#FFF3E0).borderRadius(12)}3. Component 使用场景// 底部导航栏 - 适合 ComponentComponentexportstruct BottomTabBar{PropcurrentIndex:number0;// 独立 build 方法build(){/* ... */}}// 分享卡片 - 适合 ComponentComponentexportstruct ShareCard{Proptitle:string;Propsubtitle:string;build(){/* ... */}}4. 小分享 App 中的使用组件/片段实现方式原因ToolItemBuilder简单 UI 片段FormatItemBuilder简单 UI 片段StatItemBuilder简单 UI 片段TagBuilder简单 UI 片段BottomTabBarComponent复杂独立组件ShareCardComponent跨页面复用CategoryIconComponent独立组件5. 完整代码文件索引文件路径说明多个页面文件Builder 定义components/BottomTabBar.etsComponent 组件components/ShareCard.etsComponent 组件components/CategoryIcon.etsComponent 组件6. 总结本文详细对比了 Builder 和 Component 两种 UI 复用机制给出了选型建议和实践案例。相关资源HarmonyOS Builder 官方文档Builder GuideHarmonyOS Component 文档Component ReferenceHarmonyOS Preview 装饰器Preview GuideHarmonyOS Prop 装饰器Prop GuideHarmonyOS 组件封装Component EncapsulationHarmonyOS 组件最佳实践Component Best PracticesHarmonyOS 状态管理State Management开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netArkUI 基础组件详解本文涉及的所有 API 索引API类别用途Column布局容器垂直排列子组件Row布局容器水平排列子组件Text基础组件显示文本ForEach渲染控制循环渲染列表State装饰器组件内状态管理Builder装饰器封装可复用 UI 片段router.pushUrl路由页面跳转router.back路由返回上一页总结本文详细讲解了小分享 App 中对应页面的完整实现。核心知识点涵盖布局容器、组件封装、状态管理、路由跳转等关键技术。通过本文的学习读者可以掌握 HarmonyOS ArkUI 声明式开发的核心技能并能够独立实现类似的页面功能。相关资源HarmonyOS 官方文档https://developer.huawei.com/consumer/cn/doc/ArkTS 语法指南ArkTS Introduction状态管理指南State ManagementArkUI 组件参考ArkUI Components路由 APIRouter API开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net6. 完整对比表格对比维度BuilderComponent复用粒度UI 片段完整组件状态管理共享外部状态独立状态管理调用方式this.xxx()标签调用Component /参数传递函数参数Prop 装饰器生命周期无独立生命周期有独立生命周期独立预览不支持Preview 支持代码复用低高适用场景简单 UI 片段复杂独立组件7. 小分享 App 中的使用组件/片段实现方式原因ToolItemBuilder简单 UI 片段FormatItemBuilder简单 UI 片段StatItemBuilder简单 UI 片段TagBuilder简单 UI 片段BottomTabBarComponent复杂独立组件ShareCardComponent跨页面复用CategoryIconComponent独立组件8. 选型建议使用 Builder 的场景工具栏按钮、标签等简单 UI 片段不需要独立状态管理的 UI 元素仅在当前页面使用的 UI 片段使用 Component 的场景底部导航栏、分享卡片等复杂组件需要在多个页面复用的 UI 单元需要独立状态管理的组件9. 完整代码文件索引文件路径说明多个页面文件Builder 定义components/BottomTabBar.etsComponent 组件components/ShareCard.etsComponent 组件components/CategoryIcon.etsComponent 组件10. 本文涉及的所有 APIAPI/组件用途文档链接BuilderUI 片段复用BuilderComponent组件封装ComponentProp属性传递PropPreview组件预览Preview11. 实现要点总结Builder 与 Component 的核心区别Builder 适合简单 UI 片段参数通过函数参数传递Component 适合复杂组件参数通过 Prop 传递Builder 无独立生命周期共享外部状态Component 有独立生命周期独立管理状态Preview 支持 Component 预览Builder 不支持12. 总结本文详细对比了 Builder 和 Component 两种 UI 复用机制给出了选型建议和实践案例。相关资源HarmonyOS Builder 官方文档Builder GuideHarmonyOS Component 文档Component ReferenceHarmonyOS Preview 装饰器Preview GuideHarmonyOS Prop 装饰器Prop GuideHarmonyOS 组件封装Component EncapsulationHarmonyOS 组件最佳实践Component Best PracticesHarmonyOS 状态管理State Management开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netArkUI 基础组件详解导航与路由 Router API 深入ArkUI 基础组件详解导航与路由 Router API 深入ArkUI 基础组件详解本文档最后更新于 2026 年 7 月。ArkUI 基础组件详解导航与路由 Router API 深入ArkUI 基础组件详解如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力