Flutter入门：如何创建一行可多选的Filter Chips列表？

要搞定这个需求，你需要把单个Chip的状态管理改成列表式，再配合合适的布局组件，直接看完整方案：

核心实现步骤 #

• 用列表存所有Chip的标签文本，再用对应长度的布尔值列表管理每个Chip的选中状态（替代你原来的单个isSelected变量）
• 用GridView.count强制一行显示3个Chip，或者用Wrap实现自适应换行（根据需求选）
• 每个Chip绑定对应索引的选中状态，点击时更新状态并刷新UI

完整代码示例 #

import 'package:flutter/material.dart';

class FilterChipsDemo extends StatefulWidget {
  const FilterChipsDemo({super.key});

  @override
  State<FilterChipsDemo> createState() => _FilterChipsDemoState();
}

class _FilterChipsDemoState extends State<FilterChipsDemo> {
  // 定义所有要展示的Chip标签
  final List<String> chipLabels = ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6'];
  // 对应每个Chip的选中状态，初始全为未选中
  late List<bool> _selectedStates;

  @override
  void initState() {
    super.initState();
    // 初始化选中状态列表，和标签列表长度保持一致
    _selectedStates = List.filled(chipLabels.length, false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('多选Filter Chips示例')),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        // 用GridView.count实现一行固定3个的布局
        child: GridView.count(
          crossAxisCount: 3, // 一行显示3个
          crossAxisSpacing: 10, // Chip之间的水平间距
          mainAxisSpacing: 10, // 行与行的垂直间距
          shrinkWrap: true, // 让GridView只占内容所需高度，避免多余滚动
          children: List.generate(chipLabels.length, (index) {
            return FilterChip(
              label: Text(chipLabels[index]),
              selected: _selectedStates[index], // 绑定对应索引的选中状态
              selectedColor: Colors.blue.withOpacity(0.2), // 选中时的背景色，可自定义
              onSelected: (bool value) {
                setState(() {
                  // 更新对应Chip的选中状态
                  _selectedStates[index] = value;
                });
              },
            );
          }),
        ),
      ),
    );
  }
}

代码解释 #

1. 状态管理：原来的单个isSelected只能控制一个Chip，换成List<bool>后，每个索引对应一个Chip的选中状态，完美支持多选。
2. 布局控制：GridView.count的crossAxisCount:3直接实现一行3个的效果，间距参数可以调整Chip之间的空隙，shrinkWrap避免GridView占满整个屏幕高度。
3. 多选逻辑：每个Chip的onSelected回调里，更新对应索引的状态值，setState会触发UI刷新，实时显示选中状态。

自适应布局备选（Wrap组件） #

如果不需要严格一行3个，想让Chip根据自身宽度自适应换行，可以用Wrap替代GridView.count：

Wrap(
  spacing: 10, // 水平间距
  runSpacing: 10, // 垂直间距
  children: List.generate(chipLabels.length, (index) {
    return FilterChip(
      label: Text(chipLabels[index]),
      selected: _selectedStates[index],
      selectedColor: Colors.blue.withOpacity(0.2),
      onSelected: (bool value) {
        setState(() {
          _selectedStates[index] = value;
        });
      },
    );
  }),
)

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