0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙ArkTS聲明式組件:Radio

jf_46214456 ? 來(lái)源:jf_46214456 ? 作者:jf_46214456 ? 2024-06-28 10:29 ? 次閱讀

Radio

單選框,提供相應(yīng)的用戶交互選擇項(xiàng)。

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

子組件

無(wú)

接口

Radio(options: {value: string, group: string})

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)名參數(shù)類型必填參數(shù)描述
valuestring當(dāng)前單選框的值。
groupstring當(dāng)前單選框的所屬群組名稱,相同group的Radio只能有一個(gè)被選中。

屬性

除支持[通用屬性]外,還支持以下屬性:

名稱參數(shù)類型描述
checkedboolean設(shè)置單選框的選中狀態(tài)。 默認(rèn)值:false 從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。 從API version 10開(kāi)始,該屬性支持[$$]雙向綁定變量。
radioStyle10+[RadioStyle]設(shè)置單選框選中狀態(tài)和非選中狀態(tài)的樣式。 從API version 10開(kāi)始,該接口支持在ArkTS組件中使用。

事件

除支持[通用事件]外,還支持以下事件:

名稱功能描述
onChange(callback: (isChecked: boolean) => void)單選框選中狀態(tài)改變時(shí)觸發(fā)回調(diào)。 - isChecked為true時(shí),表示從未選中變?yōu)檫x中。 - isChecked為false時(shí),表示從選中變?yōu)槲催x中。 從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

RadioStyle對(duì)象說(shuō)明

名稱類型必填默認(rèn)值描述
checkedBackgroundColor[ResourceColor]#007DFF開(kāi)啟狀態(tài)底板顏色。
uncheckedBorderColor[ResourceColor]#182431關(guān)閉狀態(tài)描邊顏色。
indicatorColor[ResourceColor]#FFFFFF開(kāi)啟狀態(tài)內(nèi)部圓餅顏色。HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789是v直接拿

搜狗高速瀏覽器截圖20240326151344.png

示例

// xxx.ets
@Entry
@Component
struct RadioExample {
  build() {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Column() {
        Text('Radio1')
        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
          .radioStyle({
            checkedBackgroundColor: Color.Pink
          })
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) = > {
            console.log('Radio1 status is ' + isChecked)
          })
      }
      Column() {
        Text('Radio2')
        Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
          .radioStyle({
            checkedBackgroundColor: Color.Pink
          })
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) = > {
            console.log('Radio2 status is ' + isChecked)
          })
      }
      Column() {
        Text('Radio3')
        Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
          .radioStyle({
            checkedBackgroundColor: Color.Pink
          })
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) = > {
            console.log('Radio3 status is ' + isChecked)
          })
      }
    }.padding({ top: 30 })
  }
}

radio

審核編輯 黃宇

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

    關(guān)注

    1

    文章

    513

    瀏覽量

    17849
  • 鴻蒙
    +關(guān)注

    關(guān)注

    57

    文章

    2369

    瀏覽量

    42900
收藏 人收藏

    評(píng)論

    相關(guān)推薦

    HarmonyOS/OpenHarmony應(yīng)用開(kāi)發(fā)-ArkTS聲明開(kāi)發(fā)范式

    軌跡。狀態(tài)與數(shù)據(jù)管理狀態(tài)數(shù)據(jù)管理作為基于ArkTS聲明開(kāi)發(fā)范式的特色,通過(guò)功能不同的裝飾器給開(kāi)發(fā)者提供了清晰的頁(yè)面更新渲染流程和管道。狀態(tài)管理包括UI組件狀態(tài)和應(yīng)用程序狀態(tài),兩者協(xié)
    發(fā)表于 01-17 15:09

    HarmonyOS/OpenHarmony原生應(yīng)用-ArkTS萬(wàn)能卡片組件Radio

    單選框,提供相應(yīng)的用戶交互選擇項(xiàng)。該組件從API Version 8開(kāi)始支持。無(wú)子組件。 一、接口 Radio(options: {value: string, group: string}) 從
    發(fā)表于 10-13 17:21

    鴻蒙ArkTS聲明組件:Blank

    空白填充組件,在容器主軸方向上,空白填充組件具有自動(dòng)填充容器空余部分的能力。僅當(dāng)父組件為Row/Column/Flex時(shí)生效。
    的頭像 發(fā)表于 06-19 16:21 ?569次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:Blank

    鴻蒙ArkTS聲明組件:Marquee

    跑馬燈組件,用于滾動(dòng)展示一段單行文本。僅當(dāng)文本內(nèi)容寬度超過(guò)跑馬燈組件寬度時(shí)滾動(dòng),不超過(guò)時(shí)不滾動(dòng)。
    的頭像 發(fā)表于 06-25 15:52 ?447次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:Marquee

    鴻蒙ArkTS聲明組件:NavDestination

    作為NavRouter組件的子組件,用于顯示導(dǎo)航內(nèi)容區(qū)。
    的頭像 發(fā)表于 06-27 14:05 ?511次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:NavDestination

    鴻蒙ArkTS聲明組件:PatternLock

    圖案密碼鎖組件,以九宮格圖案的方式輸入密碼,用于密碼驗(yàn)證場(chǎng)景。手指在PatternLock組件區(qū)域按下時(shí)開(kāi)始進(jìn)入輸入狀態(tài),手指離開(kāi)屏幕時(shí)結(jié)束輸入狀態(tài)完成密碼輸入。
    的頭像 發(fā)表于 06-27 09:59 ?481次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:PatternLock

    鴻蒙ArkTS聲明組件:【RichText】

    富文本組件,解析并顯示HTML格式文本。
    的頭像 發(fā)表于 06-29 09:35 ?768次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:【RichText】

    鴻蒙ArkTS聲明組件:ScrollBar

    滾動(dòng)條組件ScrollBar,用于配合可滾動(dòng)組件使用,如List、Grid、Scroll。
    的頭像 發(fā)表于 07-01 15:52 ?546次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:ScrollBar

    鴻蒙ArkTS聲明組件:Span

    作為Text組件的子組件,用于顯示行內(nèi)文本的組件。
    的頭像 發(fā)表于 07-01 09:14 ?478次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:Span

    鴻蒙ArkTS聲明組件:StepperItem

    用作[Stepper]組件的頁(yè)面子組件
    的頭像 發(fā)表于 07-02 17:47 ?424次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:StepperItem

    鴻蒙ArkTS聲明組件:TextArea

    多行文本輸入框組件,當(dāng)輸入的文本內(nèi)容超過(guò)組件寬度時(shí)會(huì)自動(dòng)換行顯示。
    的頭像 發(fā)表于 07-02 15:02 ?723次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextArea

    鴻蒙ArkTS聲明組件:TextInput

    單行文本輸入框組件。
    的頭像 發(fā)表于 07-03 09:14 ?1015次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextInput

    鴻蒙ArkTS聲明組件:TextPicker

    滑動(dòng)選擇文本內(nèi)容的組件。
    的頭像 發(fā)表于 07-03 15:07 ?518次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextPicker

    鴻蒙ArkTS聲明組件:TextTimer

    通過(guò)文本顯示計(jì)時(shí)信息并控制其計(jì)時(shí)器狀態(tài)的組件
    的頭像 發(fā)表于 07-03 17:06 ?556次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextTimer

    鴻蒙ArkTS聲明組件:XComponent

    可用于EGL/OpenGLES和媒體數(shù)據(jù)寫入,并顯示在XComponent組件。
    的頭像 發(fā)表于 07-05 09:56 ?746次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:XComponent