当前位置：首页 > news >正文

鸿蒙开发：ArkUI Toggle 组件

news 2025/7/27 6:30:44

ArkUI提供了一套完整的UI开发工具集，帮助开发者高效完成页面的开发。它融合了语言、编译器、图形构建等关键的应用UI开发底座，为应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能以及实时界面预览工具等，可以支持开发者进行可视化界面开发。今天分享toggle组件技术知识，如果有所帮助，可以给个点赞关注，也可以联系我一起学习!

基本概念

在 ArkTS(假设用于 HarmonyOS 开发等相关场景)中，Toggle是一个用于实现开关功能的组件。它通常以一个可切换的按钮形式呈现，用户可以通过点击或触摸来改变其状态，比如打开或关闭某个功能、选项等。

常用属性

checked：

功能：这是一个布尔类型的属性，用于表示Toggle组件的当前状态。当checked为true时，表示开关处于打开状态;当checked为false时，表示开关处于关闭状态。

示例代码：

@Entry
@Component
struct ToggleExample {@State checked: boolean = false;build() {Toggle({checked: this.checked}) {// 可以添加文本等内容来描述开关功能Text("功能开关")}}
}

在这个例子中，Toggle组件的初始状态是关闭的，因为@State变量checked被初始化为false。

text：

功能：用于设置Toggle组件旁边显示的文字内容，帮助用户理解开关所控制的功能。

示例代码：

Toggle({text: "开启夜间模式"}) {
}

这里Toggle组件旁边会显示 “开启夜间模式” 的文字，用户可以清楚地知道这个开关的作用是控制夜间模式的开启或关闭。

textUnchecked：

功能：textChecked用于设置当Toggle处于打开状态(checked为true)时显示的文字，textUnchecked用于设置当Toggle处于关闭状态(checked为false)时显示的文字。这样可以提供更明确的状态指示。

示例代码：

Toggle({textChecked: "已开启",textUnchecked: "未开启"
}) {
}

当Toggle打开时，旁边会显示 “已开启”;当Toggle关闭时，旁边会显示 “未开启”。

事件处理

onChange 事件：

功能：当Toggle的状态发生改变(即用户点击切换开关)时，onChange事件会被触发。这个事件通常用于根据Toggle的新状态来执行相应的逻辑，比如更新应用的设置、改变界面的显示效果等。

示例代码：

@Entry
@Component
struct ToggleWithOnChangeExample {@State checked: boolean = false;build() {Toggle({checked: this.checked,onChange: (isChecked: boolean) => {this.checked = isChecked;if (isChecked) {// 执行开启功能相关的逻辑，如切换到夜间模式界面} else {// 执行关闭功能相关的逻辑，如切换回日间模式界面}}}) {Text("切换夜间模式")}}
}