listview - 搜索栏获取文本但不过滤列表

Question

如标题中所述，我有一个要过滤的Listview。我查找了无休止的示例和代码片段，但是我仍然没有找到必须放置 list = list.where((u)=>(u.name.toLowerCase().contains(_searchText.toLowerCase()) .toList())); 来过滤列表的地方。
我认为我必须在构建列表的方式上进行一些更改。
Textfield已经可以正常工作，_searchText始终是Textfield所说的。

我的代码:

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_ac/collectible/collectible_details.dart';
import 'package:flutter_ac/nooklets/nook_scaffold.dart';
import 'package:flutter_ac/nooklets/nook_search.dart';
import 'package:flutter_ac/nooklets/nook_sheet.dart';
import 'package:flutter_ac/settings.dart';
import 'package:provider/provider.dart';

import 'collectible.dart';

final TextEditingController _filter = new TextEditingController();

class CollectibleList<C extends Collectible> extends StatefulWidget {
  final List<C> collectibles;
  final String title;


  CollectibleList(
    this.collectibles,
    {
      this.title,
    }

  );

  @override
  State<StatefulWidget> createState() => _CollectibleList<C>();
}

class _CollectibleList<C extends Collectible> extends State<CollectibleList<C>> {
  Widget _appBarTitle;
  bool _isSearching;
  String _searchText = "";
  List _collectibles = new List(); 
  List _filteredCollectibles = new List(); 
  Icon _searchIcon = new Icon(Icons.search); 
  final key = new GlobalKey<ScaffoldState>();
  var list;

  _CollectibleList(){
      _filter.addListener(() {

      if (_filter.text.isEmpty) {

        setState(() {

          _searchText = "";
          _isSearching = false;
         list = list.where((u)=>(u.name.toLowerCase().contains(_searchText.toLowerCase())
            .toList()));

        });

      } else {

        setState(() {

          _searchText = _filter.text;

          log(_searchText);

        });

      }

    });
  }
  void _openDetails(Collectible collectible) {
    var locale = Localizations.localeOf(context);

    log("Opening collectible details for ${collectible.name(locale)}");

    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => CollectibleDetails(collectible)),
    );

  }

  @protected
  @override
  void initState() {
    _appBarTitle = new Text(widget.title ?? "");
    super.initState();
      _isSearching = false;
  }

  @override
  Widget build(BuildContext context) {
    var locale = Localizations.localeOf(context);
    var collectibles = widget.collectibles ?? [];

    var list = ListView.separated(
      separatorBuilder: (context, index) => Divider(
        height: 1,
        thickness: 1,
      ),
      itemCount: collectibles.length,
      itemBuilder: (context, index) {
        Collectible collectible = collectibles[index];

        return Consumer<Settings>(
          builder: (context, settings, child) {
            var titleStyle = !collectible.isObtained(settings) ?
              null :
              TextStyle(
                color: Colors.lightGreen,
              );

            return Material(
              color: Colors.transparent,
              child: ListTile(
                leading: Hero(
                  tag: collectible.heroTag,
                  child: Container(
                    child: Image(image: collectible.icon),
                    width: 50,
                    height: 50,
                    alignment: Alignment.center,
                  ),
                ),
                title: Text("${collectible.name(locale)}", style: titleStyle),
                subtitle: collectible.listSubtitle(context),
                trailing: collectible.listTrailing(context),
                onTap: () => _openDetails(collectible),
                onLongPress: () {
                  var isObtained = collectible.isObtained(settings);
                  collectible.setObtained(settings, !isObtained);
                },
              ),
            );
          },
        );
      }
    );

    return Scaffold(
      appBar: AppBar(
        title: _appBarTitle,
        centerTitle: true,
        backgroundColor: Color.fromRGBO(95, 199, 188, 1.0),
        actions: <Widget>[
          IconButton(
            icon: _searchIcon,
            onPressed: () {
              log("Searchbutton pressed");
              _searchPressed();
              //showSearch(context: context, delegate: Datasearch());
              }
          ),
          IconButton(
            icon: const Icon(Icons.filter_list)
          )
        ],
      ),
      body: NookScaffold(
        body: NookSheet(
            child: 
              Column(children:<Widget>[
                DropdownButton(onChanged: (String newValue) {
                  setState(() {
                    String dropdownValue = newValue;
                  });       
                }
                ),

                Expanded(child: list)
              ],),
          ),
        titleMargin: 0,
      )
    );
  }


  void _searchPressed() {
    setState(() 
      {
        if (this._searchIcon.icon == Icons.search) {
          this._searchIcon = new Icon(Icons.close);
          this._appBarTitle = new TextField(
            controller: _filter,
            decoration: new InputDecoration(
              prefixIcon: new Icon(Icons.search),
              hintText: 'Search...',
            ),

          );
          _handleSearchStart();
        } else {
          this._searchIcon = new Icon(Icons.search);
          this._appBarTitle = new Text(widget.title ?? "");
          _filteredCollectibles = _collectibles;
          _filter.clear();
        }
      }
    );
  }

    void _handleSearchStart(ListView list) {
    setState(() {
      _isSearching = true;
    });
  }
  List<ChildItem> _buildList() {
    return list.map((contact) => new ChildItem(contact)).toList();
  }

  List<ChildItem> _buildSearchList() {
    if (_searchText.isEmpty) {
      return list.map((contact) => new ChildItem(contact))
          .toList();
    }
    else {
      List<String> _searchList = List();
      for (int i = 0; i < list.length; i++) {
        String  name = list.elementAt(i);
        if (name.toLowerCase().contains(_searchText.toLowerCase())) {
          _searchList.add(name);
        }
      }
      return _searchList.map((contact) => new ChildItem(contact))
          .toList();
    }
  }


  }

  class ChildItem extends StatelessWidget {
    final String name;
    ChildItem(this.name);
    @override
    Widget build(BuildContext context) {
      return new ListTile(title: new Text(this.name));
    }


}

Answer 1

看起来您正在尝试为文本字段实现“键入时搜索”功能。
有两种方法(可能更多)可以使此工作正常进行。
1.手动方式:
您可以使用流来侦听用户键入的内容，并根据输入的数据来过滤要馈送到列表项的数据。
更好的解释:当用户键入内容时，对于他/她所击中的每个字符，您都将数据发送到流中，而从另一侧，您将继续收听流向该流的内容。用户键入“A”，即可将“A”输入到流中，并从另一端获取相同的内容，并使用“A”过滤所有开始/结束(或任何需要的内容...)。用户键入的每个字符都适用。
代码示例:(假设您的UI和数据功能位于不同的文件中)
这就是您的BLOC类的外观，它具有一个StreamController，其工作只是监听数据并将其传递到您需要的位置。

class Bloc{
  final _textFieldController = StreamController<String>();

  //Use this to get data out of the stream
  Stream<String> get enteredCharacter => _textFieldController.stream;

  //returns functions to change data
  Function(String) get addText => _textFieldController.sink.add;

  dispose() {
    _textFieldController.close();
  }
}
//Here we are using a single instance of the bloc class, Which you can access from anywhere.
final bloc = Bloc();

现在，如何使用它？
在数据功能所在的文件中，更重要的是，在馈送到列表 View 的数据所在的文件中，您需要侦听流中的内容，如下所示:

var enteredCharacter = "";
bloc.enteredCharacter.listen((data) {
  print("This is the character entered by the user: $data");
  enteredCharacter = data;
  _filterData(); //This function will filter your data based on the characters that the user hits.
});

简易或预构建方式:
使用一个名为autocomplete_textfield的插件，它易于使用并且几乎可以完成工作。
Click here for plugin