切換按鈕(Toggle)

2024-01-25 13:14 更新

Toggle組件提供狀態(tài)按鈕樣式,勾選框樣式及開(kāi)關(guān)樣式,一般用于兩種狀態(tài)之間的切換。具體用法請(qǐng)參考Toggle

創(chuàng)建切換按鈕

Toggle通過(guò)調(diào)用接口來(lái)創(chuàng)建,接口調(diào)用形式如下:

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

該接口用于創(chuàng)建切換按鈕,其中ToggleType為開(kāi)關(guān)類(lèi)型,包括Button、Checkbox和Switch,isOn為切換按鈕的狀態(tài),接口調(diào)用有以下兩種形式:

  • 創(chuàng)建不包含子組件的Toggle。

    當(dāng)ToggleType為Checkbox或者Switch時(shí),用于創(chuàng)建不包含子組件的Toggle:

    1. Toggle({ type: ToggleType.Checkbox, isOn: false })
    2. Toggle({ type: ToggleType.Checkbox, isOn: true })

    1. Toggle({ type: ToggleType.Switch, isOn: false })
    2. Toggle({ type: ToggleType.Switch, isOn: true })

  • 創(chuàng)建包含子組件的Toggle。

    當(dāng)ToggleType為Button時(shí),只能包含一個(gè)子組件,如果子組件有文本設(shè)置,則相應(yīng)的文本內(nèi)容會(huì)顯示在按鈕內(nèi)部。

    1. Toggle({ type: ToggleType.Button, isOn: false }) {
    2. Text('status button')
    3. .fontColor('#182431')
    4. .fontSize(12)
    5. }.width(100)
    6. Toggle({ type: ToggleType.Button, isOn: true }) {
    7. Text('status button')
    8. .fontColor('#182431')
    9. .fontSize(12)
    10. }.width(100)

自定義樣式

  • 通過(guò)selectedColor屬性設(shè)置Toggle打開(kāi)選中后的背景顏色。
    1. Toggle({ type: ToggleType.Button, isOn: true }) {
    2. Text('status button')
    3. .fontColor('#182431')
    4. .fontSize(12)
    5. }.width(100).selectedColor(Color.Pink)
    6. Toggle({ type: ToggleType.Checkbox, isOn: true })
    7. .selectedColor(Color.Pink)
    8. Toggle({ type: ToggleType.Switch, isOn: true })
    9. .selectedColor(Color.Pink)

  • 通過(guò)switchPointColor屬性設(shè)置Switch類(lèi)型的圓形滑塊顏色,僅對(duì)type為T(mén)oggleType.Switch生效。
    1. Toggle({ type: ToggleType.Switch, isOn: false })
    2. .switchPointColor(Color.Pink)
    3. Toggle({ type: ToggleType.Switch, isOn: true })
    4. .switchPointColor(Color.Pink)

添加事件

除支持通用事件外,Toggle通常用于選中和取消選中后觸發(fā)某些操作,可以綁定onChange事件來(lái)響應(yīng)操作后的自定義行為。

  1. Toggle({ type: ToggleType.Switch, isOn: false })
  2. .onChange((isOn: boolean) => {
  3. if(isOn) {
  4. // 需要執(zhí)行的操作
  5. }
  6. })

場(chǎng)景示例

Toggle可用于切換藍(lán)牙開(kāi)關(guān)狀態(tài)。

  1. // xxx.ets
  2. import promptAction from '@ohos.promptAction';
  3. @Entry
  4. @Component
  5. struct ToggleExample {
  6. build() {
  7. Column() {
  8. Row() {
  9. Text("Bluetooth Mode")
  10. .height(50)
  11. .fontSize(16)
  12. }
  13. Row() {
  14. Text("Bluetooth")
  15. .height(50)
  16. .padding({left: 10})
  17. .fontSize(16)
  18. .textAlign(TextAlign.Start)
  19. .backgroundColor(0xFFFFFF)
  20. Toggle({ type: ToggleType.Switch })
  21. .margin({left: 200, right: 10})
  22. .onChange((isOn: boolean) => {
  23. if(isOn) {
  24. promptAction.showToast({ message: 'Bluetooth is on.' })
  25. } else {
  26. promptAction.showToast({ message: 'Bluetooth is off.' })
  27. }
  28. })
  29. }
  30. .backgroundColor(0xFFFFFF)
  31. }
  32. .padding(10)
  33. .backgroundColor(0xDCDCDC)
  34. .width('100%')
  35. .height('100%')
  36. }
  37. }

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)