Skip to main content
版本:v3

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)
}
})