Skip to main content
版本：v2

RADIO_GROUP

API_LEVEL 2.0 开始支持，API 兼容性请参考 API_LEVEL。

radio_group_sample

用于在多个选项中选择单个选项。每个单独的选项是 STATE_BUTTON 控件，需要单独创建。

创建 UI 控件​

import { createWidget, widget } from '@zos/ui'

const radioGroup = createWidget(widget.RADIO_GROUP, radioGroupParam)
const stateButton = createWidget(widget.STATE_BUTTON, stateButtonParam)

类型​

radioGroupParam: object​

属性说明是否必须类型
x控件 x 坐标是number
y控件 y 坐标是number
w控件显示宽度是number
h控件显示高度是number
select_src控件选中状态所显示的图片是string
unselect_src控件未选中状态所显示的图片是string
check_func按钮状态改变时的回调否CheckFunc

CheckFunc: function​

(radioGroup: RadioGroup, index: number, checked: boolean) => void
参数说明类型
radioGroupradioGroup 实例RadioGroup
index单个选项的索引number
checked是否选中boolean

StateButton: object​

属性说明是否必须类型
x控件 x 坐标，相对于 radioGroup 的坐标是number
y控件 y 坐标, 相对于 radioGroup 的坐标是number
w控件显示宽度是number
h控件显示高度是number
警告

必须要对控件进行一次初始化设置 prop.INIT，才能渲染视图

Prop 属性​

属性支持 get/set类型备注
prop.INITsetobject初始化组件，并且设置默认的选中项
prop.CHECKEDset/getobject设置选中子控件为选中状态，或者用于获取子控件的选中状态，值的类型为 boolean
prop.UNCHECKEDgetobject设置选中子控件为未选中状态，或者用于获取子控件的选中状态，值的类型为 boolean

代码示例​

提示

代码示例中的图片资源请参考 设计资源

import { createWidget, widget } from '@zos/ui'

Page({
  build() {
    const radioGroup = createWidget(widget.RADIO_GROUP, {
      x: 0,
      y: 0,
      w: 480,
      h: 64,
      select_src: 'selected.png',
      unselect_src: 'unselected.png',
      check_func: (group, index, checked) => {
        console.log('index', index)
        console.log('checked', checked)
      }
    })

    const button1 = radioGroup.createWidget(widget.STATE_BUTTON, {
      x: 40,
      y: 200,
      w: 64,
      h: 64
    })
    const button2 = radioGroup.createWidget(widget.STATE_BUTTON, {
      x: 190,
      y: 200,
      w: 64,
      h: 64
    })
    const button3 = radioGroup.createWidget(widget.STATE_BUTTON, {
      x: 340,
      y: 200,
      w: 64,
      h: 64
    })

    radioGroup.setProperty(prop.INIT, button3)
  }
})