介绍
Radio（单选框） 适用于需要从一组 互斥选项 中 选择单个值的场景
核心特性
互斥选择
同一组Radio中仅有一个选项可被选中，用户选择其他选项时，原选中项会自动取消选中。分组管理
通过group属性将多个Radio划分为一组，确保组内互斥性。例如，性别选择（男/女）或设置模式（浅色/深色/系统）。状态控制
checked(value: boolean)：设置是否选中（true/false）。onChange(callback)：监听选中状态变化，触发自定义逻辑。
样式定制
- 支持设置选中/未选中状态的样式（如颜色、大小）。
- 从API Version 12开始，默认选中样式由
RadioIndicatorType控制。
应用场景
- 性别
- 单选题、判断题
接口
Radio(options: RadioOptions)
通过RadioOptions配置属性，核心参数包括：
value：当前单选框的值。group：所属分组名称，同一组的单选框互斥
常用属性
checked
布尔值，设置当前选项是否被选中，通常与状态变量绑定，通过 $$ 实现双向绑定
例子
@State nan:boolean = false // 是否选中男
@State nv:boolean = false // 是否选中女
build() {
Column() {
Row(){
Text("性别：")
Radio({
value:"男",
group:"sex"
})
.checked($$this.nan)
Text("男")
Radio({
value:"女",
group:"sex"
})
.checked($$this.nv)
.margin({
left:20
})
Text("女")
}
.width("100%")
Button("获取值")
.onClick( ()=>{
console.log("this.nan:",this.nan)
console.log("this.nv:",this.nv)
})
}
}
单选按钮的大小
size：单选按钮的大小（宽高相同），如 size(20)
Row() {
Radio({ value: "option1", group: "custom" })
.checked(this.selectedValue === "option1")
.color("#007DFF") // 选中时的颜色
.size(24) // 增大尺寸
.onChange((isChecked) => {
if (isChecked) this.selectedValue = "option1";
})
Text("自定义样式选项")
.fontSize(15)
}
事件
绑定onChange事件，响应选中状态变化：
Radio({
value: 'dark',
group: 'themeGroup'
}).onChange((isChecked: boolean) => {
if (isChecked) {
console.log('深色模式已选中');
// 执行切换逻辑（如更新主题）
}
});
动态生成选项
结合ForEach动态渲染选项列表，详见链接：
https://www.malaoshi.top/show_1GW570S1SaU.html
适用于从数据源生成单选框：
// 定义样式选择类型
interface ThemeOptions{
value: string
text: string
}
@Entry
@Component
struct Index {
@State themeOptions: Array<ThemeOptions> = [
{ value: 'light', text: '浅色模式' },
{ value: 'dark', text: '深色模式' },
{ value: 'system', text: '跟随系统' }
];
@State selectedTheme: string = 'system';
build() {
Column() {
Text('选择主题').fontSize(18);
ForEach(this.themeOptions, (option:ThemeOptions) => {
Row() {
Radio({
value: option.value,
group: 'themeGroup'
})
.checked(this.selectedTheme === option.value)
.onChange((isChecked: boolean) => {
if (isChecked) {
this.selectedTheme = option.value;
console.log(`当前主题: ${option.text}`);
}
})
Text(option.value)
}
})
Button("获取值")
.onClick( ()=>{
console.log("主题:",this.selectedTheme)
})
}
.alignItems(HorizontalAlign.Start)
}
}