如何添加复选框、flutter 的搜索字段

Question

我想为我的复选框添加一个搜索字段，复选框工作得很好，只是想根据搜索查询过滤它们。我添加了一个搜索栏作为“TextField”，但没有得到预期的输出。

我尝试了一种方法，但是当查询为空时，所有复选框都会被自动选中，如果我们开始搜索，包含查询的复选框就会被选中。

预期输出： 包含搜索查询的所有复选框都会显示在屏幕上。

从 /main 调用

void _showMultiSelect() async {
    final List<String> employees = [
      'Vaibhav Sutar',
      'Debayan',
      'Yash Singh',
      'Tahmeed Zamindar',
      'Vishhal Narkar',
    ];

    var results = await showDialog(
      context: context,
      builder: (BuildContext context) {
        return MultiSelect(employees: employees);
      },
    );

    if (results != null) {
      setState(() {
        _selectedEmployees = results;
      });
    }
  }

multi_select.dart

import "package:flutter/material.dart";
import "package:get/get.dart";
import "package:tact_tik/fonts/inter_light.dart";
import "package:tact_tik/fonts/inter_medium.dart";
import "package:tact_tik/utils/colors.dart";

class MultiSelect extends StatefulWidget {
  final List<String> employees;
  const MultiSelect({super.key, required this.employees});
  // void _runFilter(){}

  @override
  State<MultiSelect> createState() => _MultiSelectState();
}

List<String> selectedEmployees = [];
final List<String> employees = [
  'Vaibhav Sutar',
  'Debayan',
  'Yash Singh',
  'Tahmeed Zamindar',
  'Vishhal Narkar',
];

class _MultiSelectState extends State<MultiSelect> {
  void _itemChange(String employeeValue, bool isSelected) {
    setState(() {
      if (isSelected) {
        selectedEmployees.add(employeeValue);
      } else {
        selectedEmployees.remove(employeeValue);
      }
    });
  }

  List<String> _foundUsers = [];
  @override
  void initState() {
    _foundUsers = employees;
    super.initState();
  }

  _runFilter(String enteredKey) {
    List<String> results = [];
    if (enteredKey.isEmpty) {
      results = employees;
    } else {
      results = employees
          .where((employee) =>
              employee.toLowerCase().contains(enteredKey.toLowerCase()))
          .toList();
    }
    setState(() {
      _foundUsers = results;
    });
  }

  void _cancel() {
    Navigator.pop(context);
  }

  void _submit() {
    Navigator.pop(context, selectedEmployees);
    print(selectedEmployees);
  }

  @override
  Widget build(BuildContext context) {
    final bool isDark = Theme.of(context).brightness == Brightness.dark;

    return AlertDialog(
      scrollable: true,
      title: InterMedium(
        text: "Select Employees",
        color: isDark ? DarkColor.Primarycolor : LightColor.Primarycolor,
      ),
      content: SingleChildScrollView(
        child: Column(
          children: [
            TextField(
              onChanged: (value) => _runFilter(value),
              decoration: InputDecoration(
                  labelText: 'Search Employee', suffixIcon: Icon(Icons.search)),
            ),
            ListBody(
              children: widget.employees
                  .map((item) => CheckboxListTile(
                        activeColor: isDark
                            ? DarkColor.Primarycolor
                            : LightColor.Primarycolor,
                        value: selectedEmployees.contains(item),
                        title: InterLight(
                          text: item,
                        ),
                        controlAffinity: ListTileControlAffinity.leading,
                        onChanged: (isChecked) => _itemChange(item, isChecked!),
                      ))
                  .toList(),
            ),
          ],
        ),
      ),
      actions: [
        TextButton(
          onPressed: _cancel,
          child: InterMedium(
            text: 'Cancel',
            color: isDark ? DarkColor.color2 : LightColor.color4,
          ),
        ),
        ElevatedButton(
          onPressed: _submit,
          child: InterMedium(
              text: 'Submit',
              color: isDark ? DarkColor.Primarycolor : LightColor.Primarycolor),
        )
      ],
    );
  }
}

电流输出

Answer 1

您必须根据

_foundUsers

成员构建列表。目前您在

ListBody

中的位置为

children

:

children: widget.employees.map

将其替换为：

children: _foundUsers.map