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

基础组件库：Button、Input、Switch等原子组件封装（251）

相关推荐

《我的世界》全平台下载安装指南：从Java环境配置到移动端部署

计算机毕业设计之个人健康管理系统

VIN 车架号查询车辆信息实战教程

更多资讯

SPSS多元线性回归全流程：从数据准备到结果解读与避坑指南

Qwen2.5-0.5B 与 1.5B 选型后，把跨档 API 对照的模型通道改到 TaoToken

集团信息化规划实战：资产盘点、问题诊断与需求落地

Stata实战：CSMAR资质认定数据清洗与DID面板匹配全流程

Aider vs Cline：同一把 TaoToken Key 跑同一个 Python 仓库的依赖升级

Google styleguide 文档最佳实践：六个原则打造小而活的工程文档

今日更新

校园网认证计费模式详解：AAA与代拨架构、原理及排障

Spring Boot+Vue垃圾分类毕设：分层、权限与排错实战

把 Cline 的 Base URL 改到 TaoToken 之后，DeepSeek 仍能修调试配置

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？