ArkUI Radio单选框组件的用法（附带实例）

Radio 是单选框组件，通常用于提供相应的用户交互选择项。同一组的 Radio 中只有一个可以被选中。

ArkUI Radio创建单选框

Radio 通过调用接口来创建，接口调用形式如下：

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

其中，value 是单选框的名称，group 是单选框所属群组的名称。

通过 checked 属性可以设置单选框的状态。当 checked 的值为 true 时，表示单选框被选中；当 checked 的值为 false 时，表示单选框未被选中。

Radio 支持设置选中状态和非选中状态的样式，但不支持自定义形状。

创建单选框的示例代码如下：

@Entry
@Component
struct ButtonSample {
    build() {
        Row() {
            // 单选框组件，设置值，设置所属的组，默认未选中
            Radio({ value: 'Radio1', group: 'radioGroup' }).checked(false)
            // 单选框组件，设置值，设置所属的组，默认选中
            Radio({ value: 'Radio2', group: 'radioGroup' }).checked(true)
        }.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.SpaceAround)
        .height(30).width(50)
    }
}

显示效果如图所示：


Radio 可用于在被选中后触发某些操作，可以绑定 onChange 事件来响应这些操作的自定义行为，示例代码如下：

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct ButtonSample {
    build() {
        Row() {
            // 单选框组件，设置值和所属的组
            Radio({ value: 'Radio1', group: 'radioGroup' })
                .onChange((isChecked: boolean) => {
                    if (isChecked) {
                        // 需要执行的操作
                        promptAction.showToast({ message: '选中了 Radio1', duration: 2000, bottom: '80%' })
                    }
                })
            // 单选框组件，设置值和所属的组
            Radio({ value: 'Radio2', group: 'radioGroup' })
                .onChange((isChecked: boolean) => {
                    if (isChecked) {
                        // 需要执行的操作
                        promptAction.showToast({ message: '选中了 Radio2', duration: 2000, bottom: '80%' })
                    }
                })
        }.justifyContent(FlexAlign.Center)
        .height(30).width('100%')
    }
}

显示效果如下图所示：