第18节 Toggle
1. 基本概念
在
ArkTS
（假设用于
HarmonyOS
开发等相关场景）中，
Toggle
是一个用于实现开关功能的组件。它通常以一个可切换的按钮形式呈现，用户可以通过点击或触摸来改变其状态，比如打开或关闭某个功能、选项等。
2. 常用属性
checked：
- 功能：这是一个布尔类型的属性，用于表示 Toggle 组件的当前状态。当 checked 为true 时，表示开关处于打开状态；当 checked 为 false 时，表示开关处于关闭状态。
- 示例代码：
@Entry
@Component
struct ToggleExample {
@State checked: boolean = false;
build() {
Toggle({checked: this.checked}) {
// 可以添加文本等内容来描述开关功能
Text("功能开关")
}
}
}
在这个例子中，
Toggle
组件的初始状态是关闭的，因为
@State
变量
checked
被初始化为
fals
。
text：
- 功能：用于设置 Toggle 组件旁边显示的文字内容，帮助用户理解开关所控制的功能。
- 示例代码：
Toggle({text: "开启夜间模式"}) {
}
这里
Toggle
组件旁边会显示
“
开启夜间模式
”
的文字，用户可以清楚地知道这个开关的作用是控制夜间模式的开启或关闭。
textChecked 和
textUnchecked：- 功能： textChecked 用于设置当 Toggle 处于打开状态（ checked 为 true ）时显示的文字， textUnchecked 用于设置当 Toggle 处于关闭状态（ checked 为 false ）时显示的文字。这样可以提供更明确的状态指示。
- 示例代码：
Toggle({
textChecked: "已开启",
textUnchecked: "未开启"
}) {
}
当
Toggle
打开时，旁边会显示
“
已开启
”
；当
Toggle
关闭时，旁边会显示
“
未开启
”
。
-
1. 事件处理
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("切换夜间模式")
}
}
}
在这个例子中，当
Toggle
的状态改变时，
onChange
事件会更新
checked
状态变量，并根据新的状态执行相应的逻辑来切换夜间模式或日间模式。
1. 应用场景
- 功能设置：在应用的设置界面中， Toggle 可以用于控制各种功能的开启和关闭，如通知提醒、自动更新、Wi - Fi 连接等功能。
- 界面模式切换：用于切换不同的界面模式，如日间模式和夜间模式、普通视图和简洁视图等，方便用户根据自己的喜好和使用场景进行选择。
- 数据筛选：在数据列表展示中，可以使用 Toggle 来控制某些筛选条件的启用和停用，例如是否显示已完成的任务、是否只显示特定类型的文件等。
原文地址：https://blog.csdn.net/m0_60889254/article/details/143565543
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！