鴻蒙ArkTS聲明式組件：Toggle

Toggle

組件提供勾選框樣式、狀態(tài)按鈕樣式及開關(guān)樣式。

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

子組件

僅當(dāng)ToggleType為Button時可包含子組件。

接口

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

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

參數(shù):

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

ToggleType枚舉說明

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

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

屬性

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

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

事件

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

名稱	功能描述
onChange(callback: (isOn: boolean) => void)	開關(guān)狀態(tài)切換時觸發(fā)該事件。從API version 9開始，該接口支持在ArkTS卡片中使用。說明：isOn為true時，代表狀態(tài)從關(guān)切換為開。isOn為false時，代表狀態(tài)從開切換為關(guān)。`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)
  }
}

toggle

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。舉報投訴