如何在Flutter的CheckboxListTile列表中实现搜索筛选功能

• 首先保留全量选项的原始Map：绝对不要直接修改存储所有选项的Map结构，搜索仅做展示层的过滤，避免选中状态丢失。你当前命名为List的变量和Dart内置的List类重名，建议修改为optionsMap避免冲突。
• 新增搜索状态变量：定义字符串类型的searchKeyword存储用户输入的搜索内容，默认值为空字符串。
• 渲染前做过滤排序：每次构建列表时，先从原始Map的所有key中筛选出包含搜索关键词的项，再按名称排序后渲染。
• 新增搜索输入组件：在全选框上方加TextField组件，实时更新searchKeyword触发列表重绘。

// 原始全量选项Map，永久保留所有选项和选中状态，不要修改这个的key
Map<String, bool> optionsMap = {
  "Kullanıcı 01": false,
  "Kullanıcı 02": false,
  "Kullanıcı 03": false,
  "Kullanıcı 04": false,
  "Kullanıcı 05": false,
  "Kullanıcı 06": false,
  "Kullanıcı 07": false,
};
// 搜索关键词变量
String searchKeyword = "";
bool tumunusecCheckbox = false;

// 布局部分
child: StatefulBuilder(
  builder: (context, _setState) => Column(
    children: [
      // 新增搜索输入框
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextField(
          decoration: const InputDecoration(
            hintText: "搜索选项",
            prefixIcon: Icon(Icons.search),
            border: OutlineInputBorder(),
          ),
          onChanged: (value) {
            _setState(() {
              searchKeyword = value;
            });
          },
        ),
      ),
      Align(
        alignment: Alignment.topLeft,
        child: CheckboxListTile(
          onChanged: (bool? value2) {
            _setState(() {
              tumunusecCheckbox = value2!;
              optionsMap.forEach((key, value) {
                optionsMap.update(key, (value) => tumunusecCheckbox);
              });
            });
          },
          title: const Text(
            "Tümünü seç",
            style: TextStyle(
                color: Colors.black87,
                fontWeight: FontWeight.bold),
          ),
          value: tumunusecCheckbox,
        ),
      ),
      Expanded(
        child: ListView(
          // 先过滤、排序key再渲染
          children: optionsMap.keys
              .where((key) => key.toLowerCase().contains(searchKeyword.toLowerCase()))
              .toList()
              ..sort() // 按名称字母序排序
              .map<Widget>((String key) {
            return CheckboxListTile(
                value: optionsMap[key],
                title: Text(
                  key,
                  style: const TextStyle(
                      color: it_tool_main_blue,
                      fontSize: 17.0,
                      fontFamily: 'sans-bold.ttf',
                      fontWeight: FontWeight.bold),
                ),
                activeColor: it_tool_main_blue,
                checkColor: Colors.white,
                onChanged: (bool? value) {
                  _setState(() {
                    optionsMap[key] = value!;
                    // 如果需要全选框联动可选在这里加逻辑：判断是否所有选项都选中，同步修改tumunusecCheckbox的值
                  });
                });
          }).toList(),
        ),
      ),
    ],
  ),
),

• 如果需要全选仅作用于筛选出来的选项，修改全选逻辑时，替换遍历的对象为过滤后的key列表即可，不用遍历全量optionsMap。
• 可以调整匹配规则，比如支持拼音搜索、首字母匹配，只需要修改where里的判断逻辑即可。

内容的提问来源于stack exchange，提问作者Kutluhan Özbakan