基础组件库：Button、Input、Switch等原子组件封装（251）
一、 架构设计：原子化与样式复用
在封装基础组件时，建议遵循以下原则：
- 原子化设计：将 Button、Input 等作为不可再拆分的最小功能单元，不持有全局状态，仅通过参数配置外观和行为。
- 样式与逻辑分离：使用
@Styles和@Extend装饰器提取公共样式，避免在组件内部硬编码样式属性。 - 状态驱动：通过
@Prop接收外部配置，使用@Link或回调函数处理双向数据绑定与交互事件。
二、 核心组件封装实战
1. 封装自定义按钮（CustomButton）
利用@Prop接收外部传入的文本、状态等属性，结合@Styles实现多变体样式。
typescript
编辑
// 定义基础按钮样式 @Styles function baseButton() { .minWidth(100) .minHeight(44) .borderRadius(8) .fontSize(16) .fontWeight(FontWeight.Medium) } @Component export struct CustomButton { @Prop text: string = '按钮' @Prop variant: 'primary' | 'secondary' = 'primary' @Prop disabled: boolean = false @Prop onClick: () => void = () => {} build() { Button(this.text) .baseButton() .backgroundColor(this.disabled ? '#CCCCCC' : (this.variant === 'primary' ? '#007DFF' : '#F0F5FF')) .fontColor(this.variant === 'primary' ? '#FFFFFF' : '#007DFF') .disabled(this.disabled) .onClick(() => { if (!this.disabled) this.onClick() }) } }2. 封装自定义输入框（CustomInput）
输入框通常需要处理焦点状态、错误提示以及双向绑定。通过@Link实现与父组件的数据同步，结合@Prop控制校验逻辑。
typescript
编辑
@Component export struct CustomInput { @Prop placeholder: string = '请输入内容' @Prop maxLength: number = 50 @Prop isError: boolean = false @Prop errorMessage: string = '' @Link inputValue: string // 双向绑定输入值 @State isFocused: boolean = false build() { Column() { TextInput({ placeholder: this.placeholder, text: this.inputValue }) .width('100%') .height(44) .fontSize(16) .backgroundColor(this.isFocused ? '#F5F5F5' : '#FFFFFF') .border({ width: this.isFocused ? 2 : 1, color: this.isError ? '#FF0000' : (this.isFocused ? '#007DFF' : '#E0E0E0'), radius: 8 }) .onChange((value: string) => { this.inputValue = value }) .onFocus(() => { this.isFocused = true }) .onBlur(() => { this.isFocused = false }) // 动态显示错误提示 if (this.isError && this.errorMessage) { Text(this.errorMessage) .fontSize(12) .fontColor('#FF0000') .margin({ top: 4 }) } } } }3. 封装设置开关（SettingSwitch）
对于设置页面常见的“左侧文字+右侧开关”布局，将其封装为组合组件，极大简化页面代码。
typescript
编辑
@Component export struct SettingSwitch { @Prop label: string @Prop desc?: string @Prop disabled: boolean = false @Link value: boolean @Prop onToggle?: (value: boolean) => void build() { Row() { Column() { Text(this.label).fontSize(16).fontColor('#1F2A37') if (this.desc) { Text(this.desc).fontSize(12).fontColor('#999999').margin({ top: 4 }) } } .layoutWeight(1) .alignItems(HorizontalAlign.Start) Toggle({ type: ToggleType.Switch, isOn: this.value }) .selectedColor('#007DFF') .disabled(this.disabled) .onChange((isOn: boolean) => { this.value = isOn this.onToggle?.(isOn) }) } .width('100%') .padding(16) .backgroundColor('#FFFFFF') } }三、 进阶：组件工厂与动态渲染
在表单生成器等复杂场景中，可以根据后端下发的 JSON 配置动态渲染不同的基础组件。利用@Builder和Map构建组件工厂：
typescript
编辑
// 定义基础 Builder @Builder function InputBuilder() { TextInput({ placeholder: '请输入' }).width('100%') } @Builder function SwitchBuilder() { Toggle({ type: ToggleType.Switch, isOn: true }) } // 组件工厂 export class ComponentFactory { private static componentMap: Map<string, WrappedBuilder<[]>> = new Map([ ['input', wrapBuilder(InputBuilder)], ['switch', wrapBuilder(SwitchBuilder)] ]) static getComponent(type: string): WrappedBuilder<[]> | undefined { return this.componentMap.get(type) } }💡 工程化最佳实践建议
- 统一目录结构：建议在
src/main/ets下建立components/atoms目录，将 Button、Input 等原子组件独立为.ets文件集中管理。 - 合理使用装饰器：使用
@Prop接收外部传参，避免内部硬编码；使用@Link处理需要双向同步的数据，避免不必要的深拷贝。 - 主题化支持：将颜色、字号等抽取到
resources/base/element/color.json中，或通过@Extend定义全局主题样式，方便一键切换暗黑模式。