Flutter：实现表格布局ToggleButtons的最优方案？

嘿，我完全懂你的困扰——想要把动态加载的ToggleButtons排成表格布局，还要保留它原生的外观和交互，之前试的几种方法要么逻辑绕，要么有维护隐患，确实头疼！其实你不用绕那么大弯，这里有个简单且优雅的解决方案，不用碰ToggleButtons的源码，也不用滥用Key：

核心思路 #

我们不用依赖原生ToggleButtons的Row布局，而是自己构建一个自定义表格组件，内部管理二维的选中状态，同时模仿ToggleButtons的样式和交互逻辑。这样既能灵活控制布局（想几列就几列），又能完美保留你想要的ToggleButtons视觉效果。

具体实现步骤 #

1. 拆分按钮列表为二维数组 #

首先写一个工具方法，把动态加载的一维按钮文本列表拆分成指定列数的二维数组，方便后续构建表格：

List<List<String>> _splitIntoRows(List<String> items, int columns) {
  List<List<String>> rows = [];
  for (int i = 0; i < items.length; i += columns) {
    final endIndex = i + columns > items.length ? items.length : i + columns;
    rows.add(items.sublist(i, endIndex));
  }
  return rows;
}

2. 自定义表格ToggleButtons组件 #

这个组件会处理状态管理、布局和交互，完全匹配原生ToggleButtons的样式：

class TableToggleButtons extends StatefulWidget {
  final List<String> buttonTexts;
  final int columns;
  final ValueChanged<List<bool>>? onSelectionChanged;

  const TableToggleButtons({
    super.key,
    required this.buttonTexts,
    this.columns = 3, // 默认每行3个按钮
    this.onSelectionChanged,
  });

  @override
  State<TableToggleButtons> createState() => _TableToggleButtonsState();
}

class _TableToggleButtonsState extends State<TableToggleButtons> {
  late List<List<bool>> _selectedStates;
  late List<List<String>> _buttonRows;

  @override
  void initState() {
    super.initState();
    _buttonRows = _splitIntoRows(widget.buttonTexts, widget.columns);
    // 初始化选中状态，默认全未选中
    _selectedStates = _buttonRows.map((row) => List.filled(row.length, false)).toList();
  }

  // 当按钮列表或列数变化时更新状态
  @override
  void didUpdateWidget(covariant TableToggleButtons oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.buttonTexts != widget.buttonTexts || oldWidget.columns != widget.columns) {
      _buttonRows = _splitIntoRows(widget.buttonTexts, widget.columns);
      _selectedStates = _buttonRows.map((row) => List.filled(row.length, false)).toList();
    }
  }

  // 处理按钮点击，更新对应行列的选中状态
  void _onButtonPressed(int rowIndex, int colIndex) {
    setState(() {
      _selectedStates[rowIndex][colIndex] = !_selectedStates[rowIndex][colIndex];
      // 把二维状态转成一维，方便外部使用
      final flatSelectedList = _selectedStates.expand((row) => row).toList();
      widget.onSelectionChanged?.call(flatSelectedList);
    });
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Table(
      // 可选：添加边框，和原生ToggleButtons的分隔线效果一致
      border: TableBorder.all(color: theme.dividerColor, width: 0.5),
      children: _buttonRows.asMap().entries.map((rowEntry) {
        final rowIndex = rowEntry.key;
        final rowTexts = rowEntry.value;
        return TableRow(
          children: rowTexts.asMap().entries.map((colEntry) {
            final colIndex = colEntry.key;
            final text = colEntry.value;
            final isSelected = _selectedStates[rowIndex][colIndex];
            return InkWell(
              onTap: () => _onButtonPressed(rowIndex, colIndex),
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                alignment: Alignment.center,
                // 选中时的背景色，和原生ToggleButtons一致
                color: isSelected ? theme.colorScheme.primaryContainer : null,
                child: Text(
                  text,
                  style: TextStyle(
                    // 选中时的文字颜色，匹配主题
                    color: isSelected ? theme.colorScheme.onPrimaryContainer : null,
                  ),
                ),
              ),
            );
          }).toList(),
        );
      }).toList(),
    );
  }
}

3. 使用组件 #

在你的页面里直接调用这个组件，传入动态加载的按钮列表即可：

TableToggleButtons(
  buttonTexts: yourLoadedButtonTexts, // 从资源加载的文本列表
  columns: 3, // 自定义每行的按钮数量
  onSelectionChanged: (selectedList) {
    // 处理选中状态变化，selectedList是一维数组，对应原按钮列表的选中状态
    final selectedIndices = selectedList.asMap().entries
        .where((entry) => entry.value)
        .map((entry) => entry.key)
        .toList();
    print('选中的按钮索引：$selectedIndices');
  },
)

为什么这个方案解决了你的问题？ #

• 避免源码修改：不用重写ToggleButtons的build方法，彻底杜绝Flutter版本更新带来的兼容问题；
• 状态管理清晰：通过行列索引直接定位选中状态，不用纠结如何获取ToggleButton引用；
• 不滥用Key：Key的作用是标识Widget，这里用索引传递数据完全符合规范；
• 保留原生样式：通过Theme颜色系统匹配ToggleButtons的外观，交互逻辑和原生一致；
• 灵活扩展性：可以随时调整列数、边框、内边距等样式，满足不同布局需求。

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