鸿蒙：用Toggle组件实现选择框、开关样式

1、前言

在鸿蒙app开发过程中，我们经常会遇到让用户勾选选项、打开开关等操作。那么用Toggle组件就可以实现这些功能。

2、参考文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-togglehttps://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-toggle

3、核心代码

 // 创建开关类型的Toggle组件// type: ToggleType.Switch 表示是开关样式// isOn: $$this.isOn 表示双向绑定isOn状态，开关操作会同步更新isOn的值Toggle({ type: ToggleType.Switch, isOn: $$this.isOn }).selectedColor('#007DFF')    // 设置开关选中时的颜色（蓝色）.switchPointColor('#FFFFFF') // 设置开关滑块的颜色（白色）// 创建复选框类型的Toggle组件// type: ToggleType.Checkbox 表示是复选框样式// 同样双向绑定isOn状态，与开关组件共享同一状态Toggle({ type: ToggleType.Checkbox, isOn: $$this.isOn }).selectedColor('#007DFF')    // 设置复选框选中时的颜色（蓝色）.switchPointColor('#FFFFFF') // 设置复选框内部图标的颜色（白色）

4、运行效果

5、完整代码

@Entry
@ComponentV2
struct Index {// @Local 装饰器声明这是一个组件内部状态变量，用于管理组件的UI状态// isOn 表示开关状态，true为打开，false为关闭，初始值为true@Local isOn: boolean = true;// @Builder 装饰器声明这是一个UI构建函数，用于封装可复用的UI片段// 作用：根据isOn状态显示"打开"或"关闭"文本@BuildertoggleBuilder() {Text(this.isOn ? '打开' : '关闭')  // 三元表达式：根据isOn状态切换显示文本.fontSize(24)                     // 设置字体大小为24.fontWeight(FontWeight.Bold) // 设置字体为粗体}// build方法是组件的UI构建入口，用于定义组件的布局和内容build() {// Column为垂直布局容器，{ space: 20 }表示子组件之间的垂直间距为20Column({ space: 20 }) {// 调用toggleBuilder构建函数，显示当前状态文本（上方）this.toggleBuilder()// 创建开关类型的Toggle组件// type: ToggleType.Switch 表示是开关样式// isOn: $$this.isOn 表示双向绑定isOn状态，开关操作会同步更新isOn的值Toggle({ type: ToggleType.Switch, isOn: $$this.isOn }).selectedColor('#007DFF')    // 设置开关选中时的颜色（蓝色）.switchPointColor('#FFFFFF') // 设置开关滑块的颜色（白色）// 再次调用toggleBuilder构建函数，显示当前状态文本（下方）this.toggleBuilder()// 创建复选框类型的Toggle组件// type: ToggleType.Checkbox 表示是复选框样式// 同样双向绑定isOn状态，与开关组件共享同一状态Toggle({ type: ToggleType.Checkbox, isOn: $$this.isOn }).selectedColor('#007DFF')    // 设置复选框选中时的颜色（蓝色）.switchPointColor('#FFFFFF') // 设置复选框内部图标的颜色（白色）}.width('100%') // 设置Column宽度为100%父容器宽度.height('100%') // 设置Column高度为100%父容器高度.justifyContent(FlexAlign.Center) // 设置子组件在垂直方向居中对齐}
}

觉得有帮助，可以点赞或收藏