如何将Flutter中的GroupButton转换为ListCheckbox？

状态准备 #

首先需要在组件的State类中维护每个筛选器对应的选中项索引集合，用来跟踪多选状态：

List<Set<int>> selectedIndicesList = [];

@override
void initState() {
  super.initState();
  // 初始化选中状态集合，与筛选器数量一一对应
  selectedIndicesList = List.generate(widget.filters.length, (_) => {});
}

方案1：自定义ListView + Checkbox（灵活控制布局） #

替换原GroupButton的代码，用ListView包裹Checkbox实现多选列表：

ListView.builder(
  shrinkWrap: true, // 避免列表占用多余空间
  itemCount: widget.filters[index].value.length,
  itemBuilder: (context, i) {
    final optionText = widget.filters[index].value[i].value;
    final isSelected = selectedIndicesList[index].contains(i);
    
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 5), // 对应原GroupButton的spacing参数
      child: Row(
        children: [
          Checkbox(
            value: isSelected,
            onChanged: (bool? newValue) {
              if (newValue == null) return;
              // 更新选中状态集合
              newValue 
                  ? selectedIndicesList[index].add(i) 
                  : selectedIndicesList[index].remove(i);
              // 调用原业务回调
              onFilterSelect(index, i, newValue);
              setState(() {});
            },
          ),
          Text(optionText),
        ],
      ),
    );
  },
)

方案2：使用CheckboxListTile（Material风格组件，更简洁） #

如果需要更贴合Material设计的样式，直接用CheckboxListTile组件：

ListView.builder(
  shrinkWrap: true,
  itemCount: widget.filters[index].value.length,
  itemBuilder: (context, i) {
    final optionText = widget.filters[index].value[i].value;
    final isSelected = selectedIndicesList[index].contains(i);
    
    return CheckboxListTile(
      title: Text(optionText),
      value: isSelected,
      onChanged: (bool? newValue) {
        if (newValue == null) return;
        newValue 
            ? selectedIndicesList[index].add(i) 
            : selectedIndicesList[index].remove(i);
        onFilterSelect(index, i, newValue);
        setState(() {});
      },
      contentPadding: const EdgeInsets.symmetric(vertical: 2, horizontal: 0), // 调整选项间距
    );
  },
)

与原GroupButton参数对应关系 #

• buttons：对应widget.filters[index].value遍历出的选项文本，在列表item中展示
• selectedButtons：对应selectedIndicesList[index]集合，用来判断当前选项是否选中
• onSelected：对应Checkbox的onChanged回调，更新状态后调用原业务逻辑方法
• spacing：通过Padding或contentPadding控制选项间的垂直/水平间距

内容的提问来源于stack exchange，提问作者M Al