基础组件库：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: Mapstring, 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定义全局主题样式方便一键切换暗黑模式。