FineUI-100-Questions/questions/4.使用ButtonGroup控制可点击组件的控制选中状态.md

使用ButtonGroup控制可点击组件的控制选中状态

先看如下示例,被选中的radio,再次点击,会使其取消选中,大多数时候这不符合我们的预期

{
    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",
        },
    ],
}

为了实现真正的单选效果,我们需要进行状态控制,尽管如此,选中状态还是会跳来跳去,如果选项比较多的话将是个灾难

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());
            },
        },
    ],
});

FineUI中提供了ButtonGroup控件,名字叫逻辑列表.他内部封装了选中逻辑控制,简单几行代码,就可以实现一个选项切换

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,
        },
    ],
});

ButtonGroup组件的默认chooseType属性为单选,也可以实现多选

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,
        },
    ],
});