Flutter：GroupButton内按钮无法正常渲染，如何实现横向滚动按钮组？

你遇到的问题是因为GroupButton组件的buttons参数默认接受的是字符串列表，而非直接传入Widget。直接将ElevatedButton作为元素传入，会被组件当成字符串解析，导致渲染异常。

要实现自定义按钮+横向滚动的效果，需要调整写法，利用组件的buttonBuilder来自定义按钮，同时用SingleChildScrollView实现横向滚动，修正后的代码如下：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  padding: const EdgeInsets.symmetric(horizontal: 16), // 可选：添加内边距避免贴边
  child: GroupButton(
    // 传入分类名称作为按钮的标识字符串
    buttons: categories.map((cat) => cat.name).toList(),
    // 通过buttonBuilder自定义每个按钮的Widget
    buttonBuilder: (isSelected, index, context) {
      final category = categories[index];
      return ElevatedButton.icon(
        onPressed: () => _getCategory(category.id),
        icon: category.icon,
        label: Text(
          category.name,
          style: const TextStyle(color: Colors.black),
        ),
        // 可选：根据选中状态调整按钮样式
        style: ElevatedButton.styleFrom(
          backgroundColor: isSelected ? Colors.blue.shade100 : Colors.white,
        ),
      );
    },
    // 按需配置单选/多选模式
    isRadio: true,
    selectedButton: 0, // 默认选中第一个分类
  ),
)

关键说明： #

• 横向滚动：用SingleChildScrollView包裹GroupButton，设置scrollDirection: Axis.horizontal实现横向滚动效果
• 自定义按钮：通过buttonBuilder回调生成每个按钮，这里可以完全自定义ElevatedButton的图标、文字、样式和点击逻辑
• 组件参数适配：buttons参数传入字符串列表作为按钮的唯一标识，组件会根据这个列表生成对应数量的按钮，再通过buttonBuilder替换成自定义Widget

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