单选框介绍

📅 2026/6/30 22:26:39
单选框介绍
单选框 (Radio)更新时间: 2026-06-12 14:54Radio是单选框组件通常用于提供相应的用户交互选择项同一组的Radio中只有一个可以被选中。具体用法请参考Radio。创建单选框Radio通过调用RadioOptions来创建以RadioOptions中的value和group为例Radio(options: {value: string, group: string})其中value是单选框的名称group是单选框的所属群组名称。checked属性可以设置单选框的状态状态分别为false和true设置为true时表示单选框被选中。Radio支持设置选中状态和非选中状态的样式。Radio({ value: Radio1, group: radioGroup }).checked(false)Radio({ value: Radio2, group: radioGroup }).checked(true)RadioButton.ets添加事件除支持通用事件外Radio还用于选中后触发某些操作可以绑定onChange事件来响应选中操作后的自定义行为。Radio({ value: Radio1, group: radioGroup }).onChange((isChecked: boolean) {if(isChecked) {//需要执行的操作// ···}})Radio({ value: Radio2, group: radioGroup }).onChange((isChecked: boolean) {if(isChecked) {//需要执行的操作// ···}})RadioButton.ets场景示例通过点击Radio切换声音模式。// xxx.etsimport { promptAction } from kit.ArkUI;EntryComponentexport struct RadioExample {State rst: promptAction.ShowToastOptions { message: Ringing mode. };State vst: promptAction.ShowToastOptions { message: Vibration mode. };State sst: promptAction.ShowToastOptions { message: Silent mode. };build() {// ···Row() {Column() {Radio({ value: Ringing, group: radioGroup }).checked(true).height(50).width(50).onChange((isChecked: boolean) {if (isChecked) {// 切换为响铃模式this.getUIContext().getPromptAction().openToast(this.rst);}})Text(Ringing)}Column() {Radio({ value: Vibration, group: radioGroup }).height(50).width(50).onChange((isChecked: boolean) {if (isChecked) {// 切换为振动模式this.getUIContext().getPromptAction().openToast(this.vst);}})Text(Vibration)}Column() {Radio({ value: Silent, group: radioGroup }).height(50).width(50).onChange((isChecked: boolean) {if (isChecked) {// 切换为静音模式this.getUIContext().getPromptAction().openToast(this.sst);}})Text(Silent)}}.height(100%).width(100%).justifyContent(FlexAlign.Center)// ···}}