一、组件参数设计（核心封装思想）
通过@Prop装饰器实现高度可配置化，支持以下关键参数：
@Prop text: string = '' // 占位提示文本
@Prop url: ResourceStr = $r('app.media.ic_common_search') // 图标资源
@Prop topHeight: number = 32 // 搜索框高度
@Prop bg: ResourceStr = $r('app.color.common_blue_bg') // 背景色
参数特性：
- 支持动态资源注入，适应不同主题场景
- 数值型参数采用独立配置，提升样式控制精度
- 默认值设定保障基础可用性
二、布局结构与样式实现
build() {
Row({ space: 4 }) { // 横向布局容器
Image(this.url) // 搜索图标
.width(15)
.fillColor($r('app.color.common_gray_01'))
Text(this.text) // 提示文本
.fontSize(12)
.fontColor($r('app.color.common_gray_01'))
}
.layoutWeight(1) // 权重布局
.height(this.topHeight) // 动态高度控制
.backgroundColor(this.bg) // 背景色配置
.borderRadius(16) // 圆角设计
.justifyContent(FlexAlign.Center) // 内容居中
.margin({ left: 15, right: 15 }) // 安全边距
}
三、关键实现技术点
-
资源动态化 通过ResourceStr类型支持多资源格式（$r/字符串/像素图），适配不同分辨率设备
-
样式继承性 采用鸿蒙系统颜色资源（如common_gray_01），自动继承主题切换能力
-
布局适应性 layoutWeight(1)使组件自动填充父容器宽度，space:4控制子元素间距
-
圆角统一性 16px圆角与高度32px形成黄金比例，视觉呈现更协调
四、组件使用示例
// 父组件调用
struct ParentComponent {
build() {
Column() {
HcSearchBox() // 默认样式
HcSearchBox({
text: '商品搜索',
bg: $r('app.color.white'),
topHeight: 40
}) // 自定义样式
}
}
}
五、代码实现效果
六、扩展建议（进阶优化方向）
1. 事件扩展
增加@Prop onSearch: (text: string) => void回调，支持输入监听
2. 动效集成
添加聚焦时的缩放动画：
.scale({ x: 0.98, y: 0.98 })
.animation({ duration: 200, curve: Curve.EaseInOut })
- 暗黑模式适配 通过@Styles定义不同主题下的颜色策略
七、设计价值总结
该封装方案实现了：
- 样式与逻辑解耦（UI参数全配置化）
- 跨场景复用能力（资源动态注入）
- 视觉规范统一（尺寸/颜色/间距系统化）
- 性能优化（声明式UI+轻量化结构）
建议结合鸿蒙@Component组件化开发规范，将此类基础控件沉淀为公共组件库，可提升团队开发效率30%以上。
