Radio

效果

子组件

无

参数

value

自己的值

group

几个 Radio 共同组成一个组，组内只能有一个被选中

属性

checked

反显数据的时候用 选中就是 true，不选中就是 false

radioStyle

自定义样式

• checkedBackgroundColor 底版颜色

• indicatorColor 钩子颜色

• uncheckedBorderColor 没选中的时候 描边颜色

事件

onChange

 .onChange((isChecked: boolean) => {
     console.log('Radio1 status is ' + isChecked)
})

示例

import { radioData, radioItem } from '../Type/Index1Type';

@Entry
@Component
struct Index2 {
    @State redioresult: string = ""
    @State radioList: radioData = {
        change: false,
        data: [
            {
                value: "苹果",
                isSelected: false,
            },
            {
                value: "香蕉",
                isSelected: false,
            },
            {
                value: "橘子",
                isSelected: false,
            },
            {
                value: "西瓜",
                isSelected: false,
            },
        ]
    }

    changeRadio(item: radioItem) {
        console.info(JSON.stringify(item))
        // 清空
        this.radioList.data.forEach((item: radioItem, index) => {
            item.isSelected = false;
        })
        item.isSelected = true;
        this.radioList.change = !this.radioList.change
        this.redioresult = item.value
    }

    build() {
        Column() {
            Row() {
                Text("你喜欢的水果").fontSize(22).fontColor(Color.Red).width(80)
                Flex(
                    {
                        wrap: FlexWrap.Wrap,
                        direction: FlexDirection.Row,
                        justifyContent: FlexAlign.SpaceEvenly,
                        alignContent: FlexAlign.Center
                    }
                ) {
                    ForEach(this.radioList.data, (item: radioItem, index) => {
                        Row() {
                            Radio({ value: item.value, group: 'groupradio1' })
                                .radioStyle({
                                    // 底版颜色
                                    checkedBackgroundColor: Color.Blue,
                                    // 钩子颜色
                                    indicatorColor: Color.Red,
                                    // 没选中的时候 描边颜色
                                    uncheckedBorderColor: Color.Gray
                                })
                                .height(50)
                                .width(20)
                                .checked(item.isSelected)
                                .onChange((value: boolean) => {
                                    if (value) {
                                        this.changeRadio(item)
                                    }
                                })
                            Text(item.value).fontSize(25).fontColor(Color.Red).margin({ left: 10 })
                        }.margin({
                            right: 25,
                            bottom: 10
                        }).onClick(() => {
                            this.changeRadio(item)
                        })
                    })
                }.layoutWeight(1)

            }

            Row() {
                Text("单选框的结果" + this.redioresult).fontSize(24).fontColor(Color.Red).margin({ top: 30 })
            }
        }
    }
}