Skip to main content
Version: v3

RADIO_GROUP

Start from API_LEVEL 2.0 . Please refer to API_LEVEL.

radio_group_sample

Used to select a single result among multiple options. Each individual option needs to be created using STATE_BUTTON.

Create UI widget

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

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

Type

radioGroupParam: object

PropertiesDescriptionRequiredType
xThe x-coordinate of the widget.YESnumber
yThe y-coordinate of the widget.YESnumber
wWidth of the widget.YESnumber
hThe height of the widget.YESnumber
select_srcThe selected image of the widget.YESstring
unselect_srcUnselected image of the widget.YESstring
check_funcCallback when the button's state changes.NOCheckFunc

CheckFunc: function

(radioGroup: RadioGroup, index: number, checked: boolean) => void
ParametersDescriptionType
radioGroupThe instance of radioGroup.RadioGroup
indexThe index of state change.number
checkedWhether to check.boolean

StateButton: object

PropertiesDescriptionRequiredType
xThe x-coordinate of the widget. Coordinates relative to radioGroup.YESnumber
yThe y-coordinate of the widget. Coordinates relative to radioGroup.YESnumber
wWidth of the widget.YESnumber
hThe height of the widget.YESnumber
caution

The widget must be initialized once with prop.INIT to render the view

Prop Properties

PropertiesSupport get/setTypeNotes
prop.INITsetobjectInitialize the widget and set the default selected items.
prop.CHECKEDset/getobject Return boolean when getSet the selected child widget to the selected state, or use to get the selected state of the child widget, the value is of type boolean.
prop.UNCHECKEDgetobjectSet the selected child widget to unselected state, or use to get the selected state of the child widget, the value is of type boolean.

Code example

tip

Please refer to Design Resources for the image resources in the code example

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