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()只有开关样式可以使用

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐