ArkUI 组件化实战：建立可复用、可组合的自定义组件

当页面只有少量 TextImage 和 Button 时把所有代码写在一个 build 中似乎很直接。但因为业务增加，页面会很快出现三个问题：结构难读、样式重复、状态修改互相影响。

开发者痛点：

• 代码维护困难：单个文件臃肿。逻辑混杂，修改一处容易影响其他部分；
• 视觉不统一：相同功能不同页面样式不一致；按理说，
• 状态管理混乱：多个地方共享数据时容易出现同步问题。

为什么需要自定义组件？

• ⚠️ 问题场景：
• "商品列表页和详情页都需要展示价格，但两处样式不一样"
• "使用者点击收藏按钮后状态没更新到其他界面"
• "每次增加功能都要复制粘贴一大段代码"

✅ 方法：


"封装统一的PriceText组件。支持不一样式参数"

"通过父子组件通信同步收藏状态"

"将重复UI抽象为可复用模块"

从最小自定义组件开始

@Entry@Component
struct ProductPage {
build {
Column {
ProductTitle
}
.width
.padding
}
}
@Component
struct ProductTitle {
build {
Text
.fontSize
.fontWeight
}
}

使用 @Prop 接收只读参数

@Component
struct PriceText {
@Prop price: number
build {
Row {
Text
.fontSize
.fontColor
Text)
.fontSize
.fontWeight
.fontColor
}
.alignItems
}
}

注意事项:

1. `@Prop`只应作为单向数据通道,子组件不能直接修改父传值;

用数据模型减少零散参数

class ProductInfo {
至于id，string = ''
从name来看，string = ''
至于image，ResourceStr = ''
price这方面，number = .
description: string = ''
说到tags。string =
}

@Component struct ProductCard { @Prop product: ProductInfo

build { /.../} }

警告: 不要将整个页面数据传入,只提供所需字段保持边界清晰 ";