Toggle

組件提供勾選框樣式、狀態按鈕樣式及開關樣式。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 8開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

子組件

僅當ToggleType為Button時可包含子組件。

接口

Toggle(options: { type: ToggleType, isOn?: boolean })

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數:

參數名	參數類型	必填	參數描述
type	[ToggleType]	是	開關的樣式。
isOn	boolean	否	開關是否打開，true：打開，false：關閉。默認值：false 從API version 10開始，該參數支持[$$]雙向綁定變量。

ToggleType枚舉說明

從API version 9開始，該接口支持在ArkTS卡片中使用。

名稱	描述
Checkbox	提供單選框樣式。說明： [通用屬性margin]的默認值為： { top: 14 px, right: 14 px, bottom: 14 px, left: 14 px }
Button	提供狀態按鈕樣式，如果子組件有文本設置，則相應的文本內容會顯示在按鈕內部。
Switch	提供開關樣式。說明： [通用屬性margin]默認值為： { top: 6px, right: 14px, bottom: 6 px, left: 14 px }

屬性

除支持[通用屬性]外，還支持以下屬性：

名稱	參數	參數描述
selectedColor	[ResourceColor]	設置組件打開狀態的背景顏色。從API version 9開始，該接口支持在ArkTS卡片中使用。
switchPointColor	[ResourceColor]	設置Switch類型的圓形滑塊顏色。說明：僅對type為ToggleType.Switch生效。從API version 9開始，該接口支持在ArkTS卡片中使用。

事件

除支持[通用事件]外，還支持以下事件：

名稱	功能描述
onChange(callback: (isOn: boolean) => void)	開關狀態切換時觸發該事件。從API version 9開始，該接口支持在ArkTS卡片中使用。說明：isOn為true時，代表狀態從關切換為開。isOn為false時，代表狀態從開切換為關。`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

新文檔.png

示例

// xxx.ets
@Entry
@Component
struct ToggleExample {
  build() {
    Column({ space: 10 }) {
      Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Switch, isOn: false })
          .selectedColor('#007DFF')
          .switchPointColor('#FFFFFF')
          .onChange((isOn: boolean) = > {
            console.info('Component status:' + isOn)
          })

        Toggle({ type: ToggleType.Switch, isOn: true })
          .selectedColor('#007DFF')
          .switchPointColor('#FFFFFF')
          .onChange((isOn: boolean) = > {
            console.info('Component status:' + isOn)
          })
      }

      Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Checkbox, isOn: false })
          .size({ width: 20, height: 20 })
          .selectedColor('#007DFF')
          .onChange((isOn: boolean) = > {
            console.info('Component status:' + isOn)
          })

        Toggle({ type: ToggleType.Checkbox, isOn: true })
          .size({ width: 20, height: 20 })
          .selectedColor('#007DFF')
          .onChange((isOn: boolean) = > {
            console.info('Component status:' + isOn)
          })
      }

      Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Button, isOn: false }) {
          Text('status button').fontColor('#182431').fontSize(12)
        }.width(106)
        .selectedColor('rgba(0,125,255,0.20)')
        .onChange((isOn: boolean) = > {
          console.info('Component status:' + isOn)
        })

        Toggle({ type: ToggleType.Button, isOn: true }) {
          Text('status button').fontColor('#182431').fontSize(12)
        }.width(106)
        .selectedColor('rgba(0,125,255,0.20)')
        .onChange((isOn: boolean) = > {
          console.info('Component status:' + isOn)
        })
      }
    }.width('100%').padding(24)
  }
}