鸿蒙Next如何实现radio功能

在鸿蒙Next开发中，如何实现Radio单选按钮功能？需要自定义样式或分组时有哪些注意事项？求具体的代码示例和布局实现方法。

2 回复

鸿蒙Next里实现radio功能？简单！用Radio组件，搭配RadioGroup包起来，就像把香肠塞进面包里。选中的时候触发onChange，代码比泡面还简单：

RadioGroup({ group: 'radioGroup' }) {
  Radio({ value: '选项1' })
  Radio({ value: '选项2' })
}
.onChange((value: string) => {
  console.log(`选了：${value}`) // 会打印"选了：选项1"
})

记住：一个RadioGroup里只能选一个，就像单身狗只能选一个对象（如果有的话）😏

更多关于鸿蒙Next如何实现radio功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过Radio和RadioGroup组件实现单选功能。以下是实现步骤和示例代码：

1. 基本用法

import { Radio, RadioGroup } from '@ohos/arkui'

@Entry
@Component
struct RadioExample {
  @State selectedValue: string = 'option1'

  build() {
    Column() {
      Text('当前选择: ' + this.selectedValue)
        .fontSize(20)
        .margin(20)

      RadioGroup({ group: 'myRadioGroup' }) {
        Radio({ value: 'option1', group: 'myRadioGroup' })
          .checked(this.selectedValue === 'option1')
          .onChange((value: boolean) => {
            if (value) {
              this.selectedValue = 'option1'
            }
          })
          .margin(10)

        Radio({ value: 'option2', group: 'myRadioGroup' })
          .checked(this.selectedValue === 'option2')
          .onChange((value: boolean) => {
            if (value) {
              this.selectedValue = 'option2'
            }
          })
          .margin(10)
      }
    }
    .width('100%')
    .padding(20)
  }
}

2. 主要属性说明

  • value: 单选项的值
  • checked: 选中状态
  • group: 所属分组名称
  • onChange: 状态变化回调

3. 样式定制

Radio({ value: 'option1', group: 'myGroup' })
  .radioStyle({
    checkedBackgroundColor: Color.Blue,
    uncheckedBorderColor: Color.Gray
  })
  .size({ width: 20, height: 20 })

4. 注意事项

  1. 同一组Radio必须使用相同的group名称
  2. 通过checked属性控制选中状态
  3. 建议配合RadioGroup容器使用

这种实现方式符合鸿蒙ArkUI声明式开发范式，通过状态驱动视图更新，代码简洁且易于维护。

回到顶部