You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

116 lines
2.7 KiB

2 years ago
# 使用ButtonGroup控制可点击组件的控制选中状态
先看如下示例,被选中的radio,再次点击,会使其取消选中,大多数时候这不符合我们的预期
```demo
{
type: "bi.vertical_adapt",
height: 30,
scrollable: false,
items: [
{
type: "bi.single_select_radio_item",
text: "选项1",
}, {
type: "bi.single_select_radio_item",
text: "选项2",
},
],
}
```
![示例](../../../images/13.gif)
为了实现真正的单选效果,我们需要进行状态控制,尽管如此,选中状态还是会跳来跳去,如果选项比较多的话将是个灾难
```demo
const radios = [];
const widget = BI.createWidget({
type: "bi.vertical_adapt",
height: 30,
scrollable: false,
items: [
{
type: "bi.single_select_radio_item",
ref: function (_ref) {
radios[0] = _ref;
},
text: "选项1",
handler: () => {
radios[1].setSelected(!radios[0].isSelected());
},
}, {
type: "bi.single_select_radio_item",
ref: function (_ref) {
radios[1] = _ref;
},
text: "选项2",
handler: () => {
radios[0].setSelected(!radios[1].isSelected());
},
},
],
});
```
![示例](../../../images/14.gif)
FineUI中提供了ButtonGroup控件,名字叫逻辑列表.他内部封装了选中逻辑控制,简单几行代码,就可以实现一个选项切换
```demo
const widget = BI.createWidget({
type: "bi.button_group",
height: 30,
layouts: {
type: "bi.vertical_adapt",
},
items: [
{
type: "bi.single_select_radio_item",
text: "选项1",
value: 1,
}, {
type: "bi.single_select_radio_item",
text: "选项2",
value: 2,
},
],
});
```
![示例](../../../images/15.gif)
ButtonGroup组件的默认chooseType属性为单选,也可以实现多选
```demo
const widget = BI.createWidget({
type: "bi.button_group",
height: 30,
layouts: {
type: "bi.vertical_adapt",
},
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
items: [
{
type: "bi.multi_select_item",
text: "选项1",
value: 1,
}, {
type: "bi.multi_select_item",
text: "选项2",
value: 2,
}, {
type: "bi.multi_select_item",
text: "选项3",
value: 3,
}, {
type: "bi.multi_select_item",
text: "选项4",
value: 4,
},
],
});
```
![示例](../../../images/16.gif)