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ù)描述 |
---|---|---|---|
value | string | 是 | 當(dāng)前單選框的值。 |
group | string | 是 | 當(dāng)前單選框的所屬群組名稱,相同group的Radio只能有一個(gè)被選中。 |
屬性
除支持[通用屬性]外,還支持以下屬性:
名稱 | 參數(shù)類型 | 描述 |
---|---|---|
checked | boolean | 設(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)部圓餅顏色。HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿 |
示例
// 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 })
}
}
審核編輯 黃宇
-
組件
+關(guān)注
關(guān)注
1文章
513瀏覽量
17849 -
鴻蒙
+關(guān)注
關(guān)注
57文章
2369瀏覽量
42900
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論