搜索栏和列表视图 Flutter

Question

我正在使用 ListViewBuilder 和 ListTile 来显示从 Firestore 获取的数据。

我想在页面顶部添加搜索栏，它应该在用户在搜索字段中键入时过滤列表视图中的记录。

这可能吗？ 如果是，我们该怎么做？

Answer 1

class SelectCity extends StatefulWidget {

  @override
  _SelectCityState createState() => _SelectCityState();
}

class _SelectCityState extends State<SelectCity> {
  List<String> _cityList = [];
  List<String> _newCityList = [];

  void _onItemChanged(String value) {
    setState(() {
      _newCityList = _cityList.where((val) {
        return val.cityName.toLowerCase().contains(value.toLowerCase());
      }).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    _cityList = Provider.of<CityData>(context).data;

    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: TextFormField(
                decoration: InputDecoration(
                  labelText: 'Search City',
                ),
                onChanged: _onItemChanged,
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemBuilder: (context, i) {
                  return Container();
                },
                itemCount: _newCityList.length,
              ),
            ),
          ],
        ),
      ),
    );
  }
}