鴻蒙HarmonyOS實戰-ArkUI元件（Toggle）

蜀道山QAQ發表於2024-04-02
鴻蒙UI元件

🚀一、Toggle

Toggle元件是一個互動式UI元件，用於切換兩種狀態之間的選擇或開關。它通常用於表示開關按鈕，例如在設定中啟用或禁用某些選項。

在Toggle元件中，使用者可以點選按鈕來切換狀態，或者使用鍵盤或其他輸入裝置上的快捷鍵。通常，Toggle元件會在使用者點選或切換狀態時觸發一個事件，以便應用程式可以響應此更改。

Toggle元件通常包含以下屬性：

  • type：表示當前Toggle元件型別。
  • isOn：表示當前Toggle元件選中的狀態。
  • onChange：在Toggle元件狀態改變時觸發的事件處理函式。

🔎1.建立切換按鈕

語法說明：

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

使用：

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column(){
        Row(){
          Toggle({ type: ToggleType.Checkbox, isOn: false })
          Toggle({ type: ToggleType.Checkbox, isOn: true })
        }
        Row(){
          Toggle({ type: ToggleType.Switch, isOn: false })
          Toggle({ type: ToggleType.Switch, isOn: true })
        }
        Row(){
          Toggle({ type: ToggleType.Button, isOn: false }) {
            Text('status button')
              .fontColor('#182431')
              .fontSize(12)
          }.width(100)
          Toggle({ type: ToggleType.Button, isOn: true }) {
            Text('status button')
              .fontColor('#182431')
              .fontSize(12)
          }.width(100)
        }
      }
    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
  }
}

image

ToggleType為Button時，只能包含一個子元件，如果子元件有文字設定，則相應的文字內容會顯示在按鈕內部。

🔎2.自定義樣式

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column(){
        Row(){
          Toggle({ type: ToggleType.Button, isOn: true }) {
            Text('status button')
              .fontColor('#182431')
              .fontSize(12)
          }.width(100).selectedColor(Color.Pink)
          Toggle({ type: ToggleType.Checkbox, isOn: true })
            .selectedColor(Color.Pink)
          Toggle({ type: ToggleType.Switch, isOn: true })
            .selectedColor(Color.Pink)
        }
        Row(){
          Toggle({ type: ToggleType.Switch, isOn: false })
            .switchPointColor(Color.Pink)
          Toggle({ type: ToggleType.Switch, isOn: true })
            .switchPointColor(Color.Pink)
        }
      }
    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
  }
}

image

switchPointColor屬性設定Switch型別的圓形滑塊顏色，僅對type為ToggleType.Switch生效

🔎3.新增事件

Toggle({ type: ToggleType.Switch, isOn: false })
  .onChange((isOn: boolean) => {
      if(isOn) {
        // 需要執行的操作
      }
  })

Toggle通常用於選中和取消選中後觸發某些操作，可以繫結onChange事件來響應操作後的自定義行為

🔎4.場景示例

Toggle按鈕通常用於控制一個開關狀態的UI控制元件，例如：

  1. 網頁中的深色模式開關：當使用者點選Toggle按鈕時，頁面將切換到深色模式或淺色模式。

  2. 移動應用中的靜音開關：當使用者點選Toggle按鈕時，應用會將聲音靜音或取消靜音。

  3. 音樂播放器中的播放/暫停開關：當使用者點選Toggle按鈕時，播放器會開始或暫停音樂的播放。

  4. 在網頁表單中，使用Toggle按鈕來切換顯示密碼或隱藏密碼。

  5. 在網頁應用程式中，使用Toggle按鈕來控制選單的開啟或關閉狀態。

Toggle按鈕適用於任何需要控制一個開關狀態的UI控制元件的場景，方便使用者快速進行相關操作。

案例如下：

import promptAction from '@ohos.promptAction';
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Text("Bluetooth Mode")
          .height(50)
          .fontSize(16)
      }
      Row() {
        Text("Bluetooth")
          .height(50)
          .padding({left: 10})
          .fontSize(16)
          .textAlign(TextAlign.Start)
          .backgroundColor(0xFFFFFF)
        Toggle({ type: ToggleType.Switch })
          .margin({left: 200, right: 10})
          .onChange((isOn: boolean) => {
            if(isOn) {
              promptAction.showToast({ message: 'Bluetooth is on.' })
            } else {
              promptAction.showToast({ message: 'Bluetooth is off.' })
            }
          })
      }
      .backgroundColor(0xFFFFFF)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}

image
853740550.png)

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章