### 文章目录
- [@[toc]](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:) - [创建切换按钮](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:) - [创建不包含子组件的Toggle](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:) - [1.当ToggleType为`Checkbox`](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:) - [2.当ToggleType为`Switch`](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:) - [创建包含子组件的Toggle。](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:) - [3.当ToggleType为`Button`时](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:) - [自定义样式](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:) - [1.通过`selectedColor`属性设置Toggle打开选中后的背景颜色。](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:) - [2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.`Switch`生效。](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:) - [2.添加事件](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:) - [场景示例:Toggle用于切换蓝牙开关状态。](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:) - [完整代码:](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为
Checkbox
2.当ToggleType为Switch
创建包含子组件的Toggle。 3.当ToggleType为Button
时 自定义样式 1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
Toggle组件提供状态按钮样式、勾选框样式和开关样式,一般用于两种状态之间的切换。
创建切换按钮
Toggle通过调用接口来创建,接口调用形式如下:
Toggle(options: {
type
: ToggleType,isOn?
: boolean })
ToggleType为开关类型,包括Button、Checkbox 和Switch
isOn: 为切换按钮的状态。
API version 11开始,Checkbox默认样式由圆角方形变为*圆形*
。
创建不包含子组件的Toggle
当ToggleType为Checkbox或者Switch时,用于创建不包含子组件的Toggle:
1.当ToggleType为Checkbox
typescript
Row(){
Toggle({type:ToggleType.Checkbox,isOn:false})
Toggle({type:ToggleType.Checkbox,isOn:true})
}
2.当ToggleType为Switch
typescript
Row(){
Toggle({type:ToggleType.Switch,isOn:false})
Toggle({type:ToggleType.Switch,isOn:true})
}
创建包含子组件的Toggle。
当ToggleType为Button时,只能包含一个子组件,如果子组件有文本设置,则相应的文本内容会显示在按钮上。
3.当ToggleType为Button
时
typescript
Row({space:10}){
Toggle({type:ToggleType.Button, isOn:false}){
Text('Status button')
.fontSize(12)
}
Toggle({type:ToggleType.Button, isOn:true}){
Text('Status button')
.fontSize(12)
}
}
自定义样式
1.通过selectedColor
属性设置Toggle打开选中后的背景颜色。
typescript
Row(){
//Button
Toggle({ type: ToggleType.Button, isOn: true }) {
Text('status button')
.fontSize(12)
}.width(100)
.selectedColor(Color.Pink)
//Checkbox
Toggle({ type: ToggleType.Checkbox, isOn: true })
.selectedColor(Color.Pink)
//Switch
Toggle({ type: ToggleType.Switch, isOn: true })
.selectedColor(Color.Pink)
}
2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch
生效。
typescript
Row(){
Toggle({ type: ToggleType.Switch, isOn: false })
.selectedColor(Color.Pink)
Toggle({ type: ToggleType.Switch, isOn: true })
.selectedColor(Color.Pink)
}
2.添加事件
除支持通用事件外,Toggle还用于选中和取消选中后触发某些操作,可以绑定
onChange
事件来响应操作后的自定义行为。
typescript
Toggle({ type: ToggleType.Switch, isOn: false })
.onChange((isOn: boolean) => {
if(isOn) {
// 需要执行的操作
}
})
场景示例:Toggle用于切换蓝牙开关状态。
完整代码:
typescript
import { promptAction, PromptAction } from '@kit.ArkUI'
@Entry
@Component
struct Index01 {
build() {
Column(){
Row(){
Text('蓝牙模式!')
}.padding(20)
Row(){
Text('蓝牙')
Toggle({type:ToggleType.Switch,isOn:true})
.onChange((isOn:boolean)=>{
if (isOn) {
promptAction.showToast({
message: '蓝牙已打开!',
duration:3000
})
}else {
promptAction.showToast({
message: '蓝牙已关闭!',
duration:3000
})
}
})
}.height(40).width('80%').backgroundColor(Color.White).padding(10)
.justifyContent(FlexAlign.SpaceBetween)
}.width('100%').height('100%').backgroundColor(Color.Gray)
}
}
完整代码:
typescript
@Entry
@Component
struct Demo1 {
build() {
Column(){
Row(){
Toggle({type:ToggleType.Checkbox,isOn:false})
Toggle({type:ToggleType.Checkbox,isOn:true})
}
Row(){
Toggle({type:ToggleType.Switch,isOn:false})
Toggle({type:ToggleType.Switch,isOn:true})
}
Row({space:10}){
Toggle({type:ToggleType.Button, isOn:false}){
Text('Status button')
.fontSize(12)
}
Toggle({type:ToggleType.Button, isOn:true}){
Text('Status button')
.fontSize(12)
}
}
Row(){
//Button
Toggle({ type: ToggleType.Button, isOn: true }) {
Text('status button')
.fontSize(12)
}.width(100)
.selectedColor(Color.Pink)
//Checkbox
Toggle({ type: ToggleType.Checkbox, isOn: true })
.selectedColor(Color.Pink)
//Switch
Toggle({ type: ToggleType.Switch, isOn: true })
.selectedColor(Color.Pink)
}
Row(){
Toggle({ type: ToggleType.Switch, isOn: false })
.selectedColor(Color.Pink)
Toggle({ type: ToggleType.Switch, isOn: true })
.selectedColor(Color.Pink)
}
//Toggle形态1:双态按钮
Toggle({ type: ToggleType.Button, isOn: true }) {
Text('开启')
}.selectedColor(Color.Green)
.onChange((isOn) => {
console.log('双态按钮被改变:', isOn) //打印为true
})
//形态2:复选框
Toggle({ type: ToggleType.Checkbox })
Text('记住登入信息')
// 形态3:开关
Toggle({type:ToggleType.Switch})
}
}
}