【愚公系列】2023年12月 HarmonyOS教学课程 015-ArkUI组件（Radio）

阅读本书更多章节>>>> 🔎1.创建单选框

语法说明：

Radio(options: {value: string, group: string})

使用：

// xxx.etsimport router from '@ohos.router';@Entry@Componentstruct Index {  build() {    Row() {      Radio({ value: 'Radio1', group: 'radioGroup' })        .checked(false)      Radio({ value: 'Radio2', group: 'radioGroup' })        .checked(true)    }    .width('100%')    .height('100%')    .backgroundColor(0xDCDCDC)    .padding({ top: 5 })  }}

🔎2.添加事件

// xxx.etsimport router from '@ohos.router';@Entry@Componentstruct Index {  build() {    Row() {      Radio({ value: 'Radio1', group: 'radioGroup' })        .onChange((isChecked: boolean) => {          if(isChecked) {            //需要执行的操作            console.log('1')          }        })      Radio({ value: 'Radio2', group: 'radioGroup' })        .onChange((isChecked: boolean) => {          if(isChecked) {            //需要执行的操作            console.log('2')          }        })    }    .width('100%')    .height('100%')    .backgroundColor(0xDCDCDC)    .padding({ top: 5 })  }}

🔎3.案例

Radio按钮是一种常见的用户界面元素，常用于允许用户在几个选项中选择一个。以下是Radio按钮的几个常见应用场景：

设置偏好：当应用程序需要让用户选择一种选项，例如语言偏好或其他个人偏好设置时，可以使用Radio按钮。

选择筛选条件：当用户需要在多个筛选条件中选择一个时，可以使用Radio按钮。例如，在电子商务网站中，用户可以使用Radio按钮选择价格范围或产品类别。

选择付款方式：当用户需要在几种付款方式中选择一种时，可以使用Radio按钮。例如，在在线购物网站中，用户可以选择使用信用卡、PayPal或网上银行。

选择性别：在某些网站或应用程序中，当用户需要提供性别信息时，可以使用Radio按钮。

多步骤表单：当构建具有多个步骤的表单时，可以使用Radio按钮来选择各个步骤之间的选项。

Radio按钮适用于任何需要用户在几个选项中进行选择的场景。它提供了一种简单易用的用户界面元素，使得用户可以方便快捷地选择他们需要的选项。

案例：

// xxx.etsimport promptAction from '@ohos.promptAction';@Entry@Componentstruct Index {  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)  }}

---

🚀感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-05-02/164166.html，文章来源：网络cs，作者：璐璐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！