单选框组控件: radiogroup
示例代码:
1"ui";
2
3ui.layout(
4 <vertical padding="16">
5 <text text="请选择一个选项：" textSize="18sp" />
6 <radiogroup id="rg">
7 <radio id="rb1" text="选项1" checked="{{true}}" />
8 <radio id="rb2" text="选项2" />
9 <radio id="rb3" text="选项3" />
10 </radiogroup>
11
12 <text text="请选择一个或多个选项：" textSize="18sp" marginTop="16" />
13 <horizontal>
14 <checkbox id="cb1" text="复选选项1" checked="{{false}}" />
15 <checkbox id="cb2" text="复选选项2" checked="{{true}}" />
16 <checkbox id="cb3" text="复选选项3" checked="{{false}}" />
17 </horizontal>
18 </vertical>
19);
官方教程：
radiogroup 单选框组合提供了几个单选框 radio 选项，但用户至多只能选择其中一个选项，即实现选项选中互斥功能。
参见 Android RadioGroup
checkedButton:
设置 radiogroup 单选框组合中初始勾选的单选框 id。例如checkedButton="@+id/radio5"，则使 id 为 radio5 的单选框选项为初始勾选状态。
例子：
1"ui";
2
3$ui.layout(
4 <vertical padding="16">
5 <radiogroup checkedButton="@+id/radio5">
6 <radio id="radio4" text="单选框4" />
7 <radio id="radio5" text="初始勾选的单选框5" />
8 <radio id="radio6" text="单选框6" />
9 </radiogroup>
10 </vertical>
11);
setOnCheckedChangeListener(listener):
listener{Function} 勾选监听的回调函数，其参数为:
-
group {RadioGroup} 发生勾选变化事件的 radiogroup 对象
-
checkedId {number} 被勾选的 radio 的 id，是一个整数；若当前没有任何单选框被勾选，则为-1
设置某个 radiogroup 单选框组合中的单选框被选中时的监听。需要注意的是这里的checkedId是一个整数，并不是类似于radio5这样的 id 字符串，我们可以通过findViewById()函数来获取具体被勾选的单选框，比如：
1"ui";
2
3$ui.layout(
4 <vertical padding="16">
5 <radiogroup id="radiogroup1">
6 <radio id="radio1" text="单选框1" />
7 <radio id="radio2" text="单选框2" />
8 <radio id="radio3" text="单选框3" />
9 </radiogroup>
10 </vertical>
11);
12
13$ui.radiogroup1.setOnCheckedChangeListener((group, checkedId) => {
14 // 根据整数id获取勾选的radio控件
15 let checkedRadio = $ui.radiogroup1.findViewById(checkedId);
16 switch (checkedRadio) {
17 case $ui.radio1:
18 toastLog("单选框1被勾选");
19 break;
20 case $ui.radio2:
21 toastLog("单选框2被勾选");
22 break;
23 case $ui.radio3:
24 toastLog("单选框3被勾选");
25 break;
26 default:
27 toastLog("没有任何单选框被勾选");
28 break;
29 }
30});
getCheckedRadioButtonId():
获取单选框组合中的已勾选的单选框选项的整数 ID，若当前没有任何单选框被勾选，则为-1。
需要注意的是这里的checkedId是一个整数，并不是类似于radio5这样的 id 字符串，我们可以通过findViewById()函数来获取具体被勾选的单选框。
进一步，我们可以通过indexOfChild获取被勾选的单选框在 radiogroup 中的位置。
例如：
1"ui";
2
3$ui.layout(
4 <vertical padding="16">
5 <radiogroup id="radiogroup2">
6 <radio id="radio4" text="单选框4" />
7 <radio id="radio5" text="单选框5" />
8 <radio id="radio6" text="单选框6" />
9 </radiogroup>
10 <button id="get" text="获取当前勾选项" />
11 </vertical>
12);
13
14$ui.get.on("click", () => {
15 // 获取radiogroup2勾选的单选框ID
16 let checkedId = $ui.radiogroup2.getCheckedRadioButtonId();
17 if (checkedId === -1) {
18 toastLog("没有任何单选框被勾选");
19 } else {
20 // 根据id获取勾选的radio
21 let checkedRadio = $ui.radiogroup2.findViewById(checkedId);
22 // 获取勾选的位置
23 let i = $ui.radiogroup2.indexOfChild(checkedRadio);
24 toastLog("当前勾选的单选框的文本: " + checkedRadio.getText().toString() + ", 位置: " + i);
25 }
26});
clearCheck():
清空单选框组合的各单选框选项的勾选状态。也即让单选框组合重置为未勾选状态。
例如:
1"ui";
2
3$ui.layout(
4 <vertical padding="16">
5 <checkbox id="cb1" text="复选框" />
6 <radiogroup id="radiogroup1">
7 <radio id="radio1" text="单选框1" />
8 <radio id="radio2" text="单选框2" />
9 <radio id="radio3" text="单选框3" />
10 </radiogroup>
11 <button id="clear" text="清空选择" />
12 </vertical>
13);
14
15$ui.clear.on("click", () => {
16 // 清空单选框选择
17 $ui.radiogroup1.clearCheck();
18 // 设置复选框为不勾选
19 $ui.cb1.attr("checked", "false");
20});
