單選框（Radio）

2024-01-25 13:14 更新

Radio是單選框組件，通常用于提供相應(yīng)的用戶交互選擇項(xiàng)，同一組的Radio中只有一個(gè)可以被選中。具體用法請(qǐng)參考Radio。

創(chuàng)建單選框

Radio通過調(diào)用接口來創(chuàng)建，接口調(diào)用形式如下：

  1. Radio(options: {value: string, group: string})
該接口用于創(chuàng)建一個(gè)單選框，其中value是單選框的名稱，group是單選框的所屬群組名稱。checked屬性可以設(shè)置單選框的狀態(tài)，狀態(tài)分別為false和true時(shí)，設(shè)置為true時(shí)表示單選框被選中。Radio僅支持選中和未選中兩種樣式，不支持自定義顏色和形狀。
  1. Radio({ value: 'Radio1', group: 'radioGroup' })
  2.   .checked(false)
  3. Radio({ value: 'Radio2', group: 'radioGroup' })
  4.   .checked(true)

添加事件

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

  1.   Radio({ value: 'Radio1', group: 'radioGroup' })
  2.     .onChange((isChecked: boolean) => {
  3.       if(isChecked) {
  4.         //需要執(zhí)行的操作
  5.       }
  6.     })
  7.   Radio({ value: 'Radio2', group: 'radioGroup' })
  8.     .onChange((isChecked: boolean) => {
  9.       if(isChecked) {
  10.         //需要執(zhí)行的操作
  11.       }
  12.     })

場(chǎng)景示例

通過點(diǎn)擊Radio切換聲音模式。

  1. // xxx.ets
  2. import promptAction from '@ohos.promptAction';
  3. @Entry
  4. @Component
  5. struct RadioExample {
  6.   build() {
  7.     Row() {
  8.       Column() {
  9.         Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
  10.           .height(50)
  11.           .width(50)
  12.           .onChange((isChecked: boolean) => {
  13.             if(isChecked) {
  14.               // 切換為響鈴模式
  15.               promptAction.showToast({ message: 'Ringing mode.' })
  16.             }
  17.           })
  18.         Text('Ringing')
  19.       }
  20.       Column() {
  21.         Radio({ value: 'Radio2', group: 'radioGroup' })
  22.           .height(50)
  23.           .width(50)
  24.           .onChange((isChecked: boolean) => {
  25.             if(isChecked) {
  26.               // 切換為振動(dòng)模式
  27.               promptAction.showToast({ message: 'Vibration mode.' })
  28.             }
  29.           })
  30.         Text('Vibration')
  31.       }
  32.       Column() {
  33.         Radio({ value: 'Radio3', group: 'radioGroup' })
  34.           .height(50)
  35.           .width(50)
  36.           .onChange((isChecked: boolean) => {
  37.             if(isChecked) {
  38.               // 切換為靜音模式
  39.               promptAction.showToast({ message: 'Silent mode.' })
  40.             }
  41.           })
  42.         Text('Silent')
  43.       }
  44.     }.height('100%').width('100%').justifyContent(FlexAlign.Center)
  45.   }
  46. }

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

掃描二維碼

下載編程獅App

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

編程獅公眾號(hào)