单选框,提供相应的用户交互选择项。该组件从API Version 8开始支持。无子组件。
一、接口
Radio(options: {value: string, group: string})
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数:
HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Radio-开源基础软件社区" height="246" src="https://img-blog.csdnimg.cn/img_convert/3a104a90e8f529ea11418aa33f6b9b69.jpeg" width="768" />
二、属性
除支持通用属性外,还支持以下属性:
HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Radio-开源基础软件社区" height="237" src="https://img-blog.csdnimg.cn/img_convert/b6fa5b0ea9d0c549ed504c1fccda330e.jpeg" width="766" />
三、事件
除支持通用事件外,还支持以下事件:
HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Radio-开源基础软件社区" height="275" src="https://img-blog.csdnimg.cn/img_convert/e1c1acf60ff5f369c0b20e939a6a16e2.jpeg" width="730" />
四、示例
// 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)
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
console.log('Radio1 status is ' + isChecked)
})
}
Column() {
Text('Radio2')
Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
console.log('Radio2 status is ' + isChecked)
})
}
Column() {
Text('Radio3')
Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
console.log('Radio3 status is ' + isChecked)
})
}
}.padding({ top: 30 })
}
}
复制
五、效果
HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Radio-开源基础软件社区" height="148" src="https://img-blog.csdnimg.cn/img_convert/e6ad08ba2d5a9b2353534020512c4bc6.jpeg" width="332" />
HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Radio-开源基础软件社区" height="136" src="https://img-blog.csdnimg.cn/img_convert/0737a58d57cfcc7c70da6298bd6789f1.jpeg" width="350" />
HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Radio-开源基础软件社区" height="148" src="https://img-blog.csdnimg.cn/img_convert/0be6295143f9dbe5e977742ef70d84fc.jpeg" width="369" />
六、场景
适合卡片上直接操作单选项的场景。
本文根据HarmonyOS官方文档整理。