HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第79天，单选框（Radio）
HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第79天，单选框（Radio）
1、单选框（Radio）
Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。具体用法请参考Radio。
2、创建单选框
Radio通过调用接口来创建，接口调用形式如下：
Radio({ value: 'Radio1', group: 'radioGroup' })
.checked(false)
Radio({ value: 'Radio2', group: 'radioGroup' })
.checked(true)该接口用于创建一个单选框，其中value是单选框的名称，group是单选框的所属群组名称。checked属性可以设置单选框的状态，状态分别为false和true时，
设置为true时表示单选框被选中。Radio仅支持选中和未选中两种样式，不支持自定义颜色和形状。
3、添加事件
除支持通用事件外，Radio通常用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为。
Radio({ value: 'Radio1', group: 'radioGroup' })
.onChange((isChecked: boolean) => {
if(isChecked) {
//需要执行的操作
}
})
Radio({ value: 'Radio2', group: 'radioGroup' })
.onChange((isChecked: boolean) => {
if(isChecked) {
//需要执行的操作
}
})4、场景示例
通过点击Radio切换声音模式。
// xxx.ets
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct RadioExample {
build() {
Row() {
Column() {
Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
if(isChecked) {
// 切换为响铃模式
promptAction.showToast({ message: 'Ringing mode.' })
}
})
Text('Ringing')
}
Column() {
Radio({ value: 'Radio2', group: 'radioGroup' })
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
if(isChecked) {
// 切换为振动模式
promptAction.showToast({ message: 'Vibration mode.' })
}
})
Text('Vibration')
}
Column() {
Radio({ value: 'Radio3', group: 'radioGroup' })
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
if(isChecked) {
// 切换为静音模式
promptAction.showToast({ message: 'Silent mode.' })
}
})
Text('Silent')
}
}.height('100%').width('100%').justifyContent(FlexAlign.Center)
}
}
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第79天，单选框（Radio）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，ArkTS语言提供了单选框（Radio）组件，用于在用户界面中实现单选功能。单选框通常用于让用户从一组选项中选择一个选项。
基本用法
在ArkTS中，单选框的使用通常涉及以下几个步骤：
-
导入相关模块：
import { Radio, RadioGroup } from '[@ohos](/user/ohos).arkui'; -
创建单选框组： 使用
RadioGroup组件来包裹多个Radio组件，确保用户只能选择其中一个选项。[@Component](/user/Component) struct MyComponent { @State selectedValue: string = 'option1'; build() { Column() { RadioGroup({ value: this.selectedValue, onChange: (value: string) => { this.selectedValue = value; } }) { Radio({ value: 'option1' }) { Text('Option 1') } Radio({ value: 'option2' }) { Text('Option 2') } Radio({ value: 'option3' }) { Text('Option 3') } } } } } -
处理选择事件： 通过
onChange事件监听用户的选择，并更新selectedValue状态。
属性说明
- value：当前选中的值。
- onChange：当用户选择不同的单选框时触发的事件。
样式定制
可以通过style属性对单选框进行样式定制，例如调整大小、颜色等。
注意事项
- 单选框组内的单选框必须具有唯一的
value属性。 - 单选框组的值通过
RadioGroup的value属性进行绑定和更新。
通过以上步骤，你可以在HarmonyOS鸿蒙Next中使用ArkTS语言实现单选框功能。
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第79天，单选框（Radio）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
