codecamp

单选框(Radio)

Radio是单选框组件,通常用于提供相应的用户交互选择项,同一组的Radio中只有一个可以被选中。具体用法请参考Radio

创建单选框

Radio通过调用接口来创建,接口调用形式如下:

  1. Radio(options: {value: string, group: string})
该接口用于创建一个单选框,其中value是单选框的名称,group是单选框的所属群组名称。checked属性可以设置单选框的状态,状态分别为false和true时,设置为true时表示单选框被选中。Radio仅支持选中和未选中两种样式,不支持自定义颜色和形状。
  1. Radio({ value: 'Radio1', group: 'radioGroup' })
  2. .checked(false)
  3. Radio({ value: 'Radio2', group: 'radioGroup' })
  4. .checked(true)

添加事件

除支持通用事件外,Radio通常用于选中后触发某些操作,可以绑定onChange事件来响应选中操作后的自定义行为。

  1. Radio({ value: 'Radio1', group: 'radioGroup' })
  2. .onChange((isChecked: boolean) => {
  3. if(isChecked) {
  4. //需要执行的操作
  5. }
  6. })
  7. Radio({ value: 'Radio2', group: 'radioGroup' })
  8. .onChange((isChecked: boolean) => {
  9. if(isChecked) {
  10. //需要执行的操作
  11. }
  12. })

场景示例

通过点击Radio切换声音模式。

  1. // xxx.ets
  2. import promptAction from '@ohos.promptAction';
  3. @Entry
  4. @Component
  5. struct RadioExample {
  6. build() {
  7. Row() {
  8. Column() {
  9. Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
  10. .height(50)
  11. .width(50)
  12. .onChange((isChecked: boolean) => {
  13. if(isChecked) {
  14. // 切换为响铃模式
  15. promptAction.showToast({ message: 'Ringing mode.' })
  16. }
  17. })
  18. Text('Ringing')
  19. }
  20. Column() {
  21. Radio({ value: 'Radio2', group: 'radioGroup' })
  22. .height(50)
  23. .width(50)
  24. .onChange((isChecked: boolean) => {
  25. if(isChecked) {
  26. // 切换为振动模式
  27. promptAction.showToast({ message: 'Vibration mode.' })
  28. }
  29. })
  30. Text('Vibration')
  31. }
  32. Column() {
  33. Radio({ value: 'Radio3', group: 'radioGroup' })
  34. .height(50)
  35. .width(50)
  36. .onChange((isChecked: boolean) => {
  37. if(isChecked) {
  38. // 切换为静音模式
  39. promptAction.showToast({ message: 'Silent mode.' })
  40. }
  41. })
  42. Text('Silent')
  43. }
  44. }.height('100%').width('100%').justifyContent(FlexAlign.Center)
  45. }
  46. }

按钮(Button)
切换按钮(Toggle)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
HAR

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }