一、引言在上一篇文章中我们学习了 OpenHarmony ArkUI 基础组件与基础布局能够完成常规页面搭建。在实际项目开发中还会用到选择器、弹窗、进度条、开关等进阶交互组件同时页面中大量重复的 UI 模块需要通过自定义组件实现代码复用、降低维护成本。本文聚焦进阶交互组件、常用拓展组件、自定义组件封装三大板块结合落地案例讲解用法、属性与开发规范帮助开发者实现更丰富的界面交互与工程化开发。二、常用进阶交互组件详解及案例2.1 Toggle 开关组件多用于设置页面、功能启停蓝牙、消息通知、夜间模式等支持状态监听与样式自定义。核心属性isOn开关状态、onChange状态切换回调、selectedColor开启颜色Entry Component struct ToggleDemo { // 绑定开关状态 State isOpen: boolean false build() { Column({ space: 20 }) { Row() { Text(开启消息通知).fontSize(18).layoutWeight(1) Toggle({ isOn: this.isOpen }) .selectedColor(#007DFF) .onChange((isOn: boolean) { this.isOpen isOn console.log(开关状态, isOn ? 已开启 : 已关闭) }) } .width(100%) .padding(15) .backgroundColor(#F5F5F5) .borderRadius(8) } .padding(20) } }2.2 Slider 滑动条组件适用于音量调节、亮度调节、进度选择等场景支持滑动取值、样式定制。核心属性min/max取值范围、value当前值、onChange滑动回调Entry Component struct SliderDemo { State currentValue: number 50 build() { Column({ space: 15 }) { Text(当前数值${this.currentValue}).fontSize(18) Slider({ min: 0, max: 100, value: this.currentValue }) .trackColor(#E5E5E5) .selectedColor(#2ECC71) .blockColor(#FFFFFF) .onChange((value: number) { this.currentValue value }) } .padding(20) } }2.3 Progress 进度条组件展示任务加载、文件下载、页面加载进度分为线性进度条、环形进度条。核心属性value当前进度、total总进度、type进度条类型Entry Component struct ProgressDemo { State progress: number 60 build() { Column({ space: 30 }) { Text(线性进度条).fontSize(18) Progress({ value: this.progress, total: 100 }) .width(100%) .color(#007DFF) Text(环形进度条).fontSize(18) Progress({ value: this.progress, total: 100, type: ProgressType.Ring }) .width(100) .height(100) .color(#FF6734) } .padding(20) } }2.4 Select 下拉选择器替代传统下拉菜单用于选项选择、分类筛选、地区选择等场景。核心属性options选项数组、selected默认选中项、onSelect选择回调Entry Component struct SelectDemo { State selectText: string 请选择分类 // 下拉选项 private options: ResourceStr[] [数码产品, 生活用品, 服饰穿搭, 美食生鲜] build() { Column({ space: 20 }) { Select(this.options) .width(200) .height(40) .onSelect((index: number, text: string) { this.selectText text }) Text(已选择${this.selectText}).fontSize(18) } .padding(20) } }2.5 AlertDialog 弹窗组件全局弹窗用于消息提示、二次确认、操作提醒是应用高频交互组件。使用说明通过show()方法唤起弹窗支持标题、内容、多按钮配置。Entry Component struct DialogDemo { build() { Column() { Button(点击弹出确认弹窗) .width(200) .onClick(() { AlertDialog.show({ title: 温馨提示, message: 确定要执行该操作吗, primaryButton: { value: 确定, action: () console.log(点击确定) }, secondaryButton: { value: 取消, action: () console.log(点击取消) } }) }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }三、自定义组件开发实战ArkUI 支持将重复使用的 UI 模块封装为自定义组件遵循Component装饰器定义可传入参数、绑定状态大幅简化代码。3.1 基础自定义组件纯展示卡片封装通用信息卡片可在列表、首页、个人中心重复调用。// 自定义卡片组件 Component struct CardItem { // 外部传入参数 Prop title: string Prop desc: string build() { Column({ space: 8 }) { Text(this.title) .fontSize(20) .fontWeight(FontWeight.Bold) Text(this.desc) .fontSize(16) .fontColor(#666666) } .width(100%) .padding(15) .backgroundColor(#FFFFFF) .borderRadius(10) .shadow({ radius: 5, color: #E0E0E0 }) } } // 页面入口调用自定义组件 Entry Component struct CustomCardPage { build() { Column({ space: 15 }) { // 多次复用自定义卡片 CardItem({ title: 功能一, desc: OpenHarmony 分布式能力介绍 }) CardItem({ title: 功能二, desc: ArkUI 组件实战开发教程 }) CardItem({ title: 功能三, desc: 应用性能优化技巧分享 }) } .width(100%) .padding(20) .backgroundColor(#F5F5F5) } }3.2 带交互的自定义组件自定义按钮封装带点击事件的交互组件支持样式、文字、事件外部传参。// 自定义交互按钮组件 Component struct MyButton { Prop btnText: string Prop btnColor: ResourceColor // 点击事件回调 BuilderParam clickFunc: () void build() { Button(this.btnText) .width(160) .height(45) .backgroundColor(this.btnColor) .borderRadius(22) .onClick(this.clickFunc) } } Entry Component struct CustomBtnPage { build() { Column({ space: 20 }) { MyButton({ btnText: 提交表单, btnColor: #007DFF, clickFunc: () console.log(点击提交按钮) }) MyButton({ btnText: 重置内容, btnColor: #999999, clickFunc: () console.log(点击重置按钮) }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }四、综合实战设置页面组件组合 自定义组件整合上文所有进阶组件与自定义组件搭建一套完整的应用设置页面可直接用于项目开发。// 自定义设置项组件 Component struct SettingItem { Prop title: string BuilderParam content: () void build() { Row() { Text(this.title) .fontSize(18) .layoutWeight(1) this.content() } .width(100%) .height(60) .padding({ left: 15, right: 15 }) .backgroundColor(#FFFFFF) } } Entry Component struct SettingPage { State noticeOpen: boolean true State brightness: number 70 build() { Column() { // 页面标题 Text(应用设置) .fontSize(24) .fontWeight(FontWeight.Bold) .margin({ bottom: 20 }) // 复用自定义设置项 开关 SettingItem({ title: 消息通知 }) { Toggle({ isOn: this.noticeOpen }) .onChange((val) this.noticeOpen val) } // 复用自定义设置项 滑动条 SettingItem({ title: 屏幕亮度 }) { Slider({ min: 0, max: 100, value: this.brightness }) .width(120) .onChange((val) this.brightness val) } // 下拉选择 SettingItem({ title: 默认分类 }) { Select([推荐, 热门, 最新]) .width(100) } Blank().layoutWeight(1) // 底部退出按钮 Button(退出登录) .width(100%) .height(50) .backgroundColor(#FF4444) .margin({ top: 30 }) .onClick(() { AlertDialog.show({ title: 退出提醒, message: 确定要退出当前账号吗, primaryButton: { value: 确定 }, secondaryButton: { value: 取消 } }) }) } .width(100%) .height(100%) .padding(20) .backgroundColor(#F5F5F5) } }五、开发总结与最佳实践5.1 进阶组件使用要点弹窗AlertDialog属于全局弹窗避免在循环内频繁调用防止层级错乱滑动条、开关、选择器必须绑定状态变量保证 UI 与数据双向同步进度条优先用于异步任务场景提升用户体验。5.2 自定义组件开发规范通用 UI 模块卡片、列表项、按钮、设置栏优先封装为自定义组件组件传参使用Prop交互事件使用BuilderParam保证组件解耦单一自定义组件只负责单一功能遵循单一职责原则。5.3 性能优化建议大量重复组件使用ForEach遍历渲染减少重复代码非高频更新的状态合理划分组件层级减少全局刷新统一组件样式圆角、间距、颜色维护全局风格。六、拓展学习方向封装全局公共组件库统一项目 UI 风格结合动画组件为开关、弹窗添加过渡动效学习CustomDialog自定义弹窗实现个性化弹窗样式。
