单选框组控件: radiogroup
1.垂直布局
垂直布局是将选择框控件按从上到下的顺序排列。这是最常见的布局方式，特别适合选项较少的情况。
示例代码:
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 <checkbox id="cb1" text="复选选项1" checked="{{false}}" />
14 <checkbox id="cb2" text="复选选项2" checked="{{false}}" />
15 <checkbox id="cb3" text="复选选项3" checked="{{false}}" />
16 </vertical>
17);
在上述代码中：
使用<vertical>标签将所有控件按垂直方向排列。
单选按钮被包含在一个<radiogroup>中，确保只能选择一个选项。
复选框则单独排列，允许用户选择多个选项。
2.水平布局
水平布局是将选择框控件按从左到右的顺序排列。这种布局适合选项较少且希望节省垂直空间的情况。
示例代码:
1"ui";
2
3ui.layout(
4 <vertical padding="16">
5 <text text="请选择一个选项：" textSize="18sp" />
6 <horizontal>
7 <radiogroup id="rg">
8 <radio id="rb1" text="选项1" checked="{{true}}" />
9 <radio id="rb2" text="选项2" />
10 <radio id="rb3" text="选项3" />
11 </radiogroup>
12 </horizontal>
13
14 <text text="请选择一个或多个选项：" textSize="18sp" marginTop="16" />
15 <horizontal>
16 <checkbox id="cb1" text="复选选项1" checked="{{false}}" />
17 <checkbox id="cb2" text="复选选项2" checked="{{false}}" />
18 <checkbox id="cb3" text="复选选项3" checked="{{false}}" />
19 </horizontal>
20 </vertical>
21);
在上述代码中：
使用<horizontal>标签将选择框控件按水平方向排列。
单选按钮和复选框都被包含在各自的<horizontal>标签中，实现水平布局。
3.网格布局
网格布局是将选择框控件按行和列的方式排列，适合选项较多的情况，可以更有效地利用屏幕空间。
示例代码:
1"ui";
2
3ui.layout(
4 <vertical padding="16">
5 <text text="请选择一个选项：" textSize="18sp" />
6 <grid layout_width="match_parent" layout_height="wrap_content" columns="2">
7 <radiogroup id="rg">
8 <radio id="rb1" text="选项1" checked="{{true}}" />
9 <radio id="rb2" text="选项2" />
10 <radio id="rb3" text="选项3" />
11 <radio id="rb4" text="选项4" />
12 <radio id="rb5" text="选项5" />
13 <radio id="rb6" text="选项6" />
14 </radiogroup>
15 </grid>
16
17 <text text="请选择一个或多个选项：" textSize="18sp" marginTop="16" />
18 <grid layout_width="match_parent" layout_height="wrap_content" columns="2">
19 <checkbox id="cb1" text="复选选项1" checked="{{false}}" />
20 <checkbox id="cb2" text="复选选项2" checked="{{false}}" />
21 <checkbox id="cb3" text="复选选项3" checked="{{false}}" />
22 <checkbox id="cb4" text="复选选项4" checked="{{false}}" />
23 <checkbox id="cb5" text="复选选项5" checked="{{false}}" />
24 <checkbox id="cb6" text="复选选项6" checked="{{false}}" />
25 </grid>
26 </vertical>
27);
在上述代码中：
使用<grid>标签将选择框控件按网格方式排列。
columns="2"属性指定了每行显示两个控件。
单选按钮和复选框都被包含在各自的<grid>标签中，实现网格布局。
4.响应式布局
为了适应不同屏幕尺寸，可以使用**权重（weight）**来实现响应式布局。权重可以让控件按比例分配可用空间。
示例代码:
1"ui";
2
3ui.layout(
4 <vertical padding="16">
5 <text text="请选择一个选项：" textSize="18sp" />
6 <horizontal>
7 <radiogroup id="rg">
8 <radio id="rb1" text="选项1" checked="{{true}}" layout_weight="1" />
9 <radio id="rb2" text="选项2" layout_weight="1" />
10 <radio id="rb3" text="选项3" layout_weight="1" />
11 </radiogroup>
12 </horizontal>
13
14 <text text="请选择一个或多个选项：" textSize="18sp" marginTop="16" />
15 <horizontal>
16 <checkbox id="cb1" text="复选选项1" checked="{{false}}" layout_weight="1" />
17 <checkbox id="cb2" text="复选选项2" checked="{{false}}" layout_weight="1" />
18 <checkbox id="cb3" text="复选选项3" checked="{{false}}" layout_weight="1" />
19 </horizontal>
20 </vertical>
21);
在上述代码中:
layout_weight="1"使用属性为每个选择框控件设置了相同的权重。
这样，每个控件将平分水平方向上的可用空间，实现响应式布局。
5.完整示例
以下是一个完整的示例代码，结合了垂直布局、水平布局和网格布局：
1"ui";
2
3ui.layout(
4 <vertical padding="16">
5 <text text="垂直布局 - 单选按钮：" textSize="18sp" />
6 <radiogroup id="rgVertical">
7 <radio id="rbv1" text="选项1" checked="{{true}}" />
8 <radio id="rbv2" text="选项2" />
9 <radio id="rbv3" text="选项3" />
10 </radiogroup>
11
12 <text text="水平布局 - 复选框：" textSize="18sp" marginTop="16" />
13 <horizontal>
14 <checkbox id="cbh1" text="复选选项1" checked="{{false}}" />
15 <checkbox id="cbh2" text="复选选项2" checked="{{false}}" />
16 <checkbox id="cbh3" text="复选选项3" checked="{{false}}" />
17 </horizontal>
18
19 <text text="网格布局 - 单选按钮：" textSize="18sp" marginTop="16" />
20 <grid layout_width="match_parent" layout_height="wrap_content" columns="2">
21 <radiogroup id="rgGrid">
22 <radio id="rbg1" text="选项1" checked="{{true}}" />
23 <radio id="rbg2" text="选项2" />
24 <radio id="rbg3" text="选项3" />
25 <radio id="rbg4" text="选项4" />
26 </radiogroup>
27 </grid>
28
29 <text text="响应式布局 - 复选框：" textSize="18sp" marginTop="16" />
30 <horizontal>
31 <checkbox id="cbr1" text="复选选项1" checked="{{false}}" layout_weight="1" />
32 <checkbox id="cbr2" text="复选选项2" checked="{{false}}" layout_weight="1" />
33 <checkbox id="cbr3" text="复选选项3" checked="{{false}}" layout_weight="1" />
34 </horizontal>
35 </vertical>
36);
官方教程：
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});
