HarmonyOS系统开发ArkTS常用组件切换按钮及参数

        Toggle为切换按钮组件，一般用于两种状态之间的切换，例如下图中的蓝牙开关。

Toggle组件的参数：Toggle(options: { type: ToggleType, isOn?: boolean })

• type属性用于设置Toggle组件的类型
• isOn属性用于设置Toggle组件的状态
• selectedColor()方法设置Toggle组件背景色
• switchPointColor()方法设置Switch类型的Toggle组件中的圆形滑块颜色

     

    可通过ToggleType枚举类型进行设置，可选的枚举值如下：

import promptAction from '@ohos.promptAction';

@Entry
@Component
struct toggleTest {
  @State isOn: boolean = true;

  build() {
    Column({ space: 10 }) {
      Row({ space: 10 }) {
        Toggle({ type: ToggleType.Switch, isOn: false }).width(50).height(100)
        Toggle({ type: ToggleType.Switch, isOn: true })
          .width(50)
          .height(100)
          .selectedColor(Color.Green)
          .switchPointColor(Color.Orange)
      }

      Row({ space: 10 }) {
        Toggle({ type: ToggleType.Checkbox, isOn: false }).width(50).height(100)
        Toggle({ type: ToggleType.Checkbox, isOn: true }).width(50).height(100)
      }

      Row({ space: 10 }) {
        Toggle({ type: ToggleType.Button, isOn: false }) {
          Text('关闭').fontSize(25).fontWeight(FontWeight.Bolder)
        }.width(100).height(50)

        // 默认是开启的
        Toggle({ type: ToggleType.Button, isOn: this.isOn }) {
          Text(this.isOn ? '开启' : '关闭').fontSize(25).fontWeight(FontWeight.Bolder)
        }.width(100).height(50)
        .onChange((isOn) => {
          this.isOn = isOn
          console.log('isOn 是点击开启按钮自动传的值赋值给 this.isOn：', this.isOn);
        })
      }

      Text('点击开启按钮测试').fontSize(25)
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)

  }
}

     注意：switchPointColor()只有开关样式可以使用