在 Flutter 中可以使用带有 ListView 的搜索栏吗？

Question

我想在我的 flutter 应用程序中实现一个搜索栏。我必须通过 ListTiles 中的列表视图。在这里，我想检查 listtile 的标题是否包含搜索字段中的字母。列表可能吗？它不必与标题一起使用。它可能是我能识别的 Tile 的其他东西。但是请不要索引，用户不会知道它。列表是正确的小部件还是我必须使用其他东西在我的应用程序中实现搜索引擎

Answer 1

尝试https://pub.dev/packages/flutter_search_panel

List<SearchItem<int>> data = [
  SearchItem(0, 'This'),
  SearchItem(1, 'is'),
  SearchItem(2, 'a'),
  SearchItem(3, 'test'),
  SearchItem(4, '.'),
];

FlutterSearchPanel<int>(
  padding: EdgeInsets.all(10.0),
  selected: 3,
  title: 'Demo Search Page',
  data: data,
  icon: new Icon(Icons.check_circle, color: Colors.white),
  color: Colors.blue,
  textStyle: new TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0, decorationStyle: TextDecorationStyle.dotted),
  onChanged: (int value) {
    print(value);
  },
),

Answer 2

您可以使用本机 showSearch() 函数，而不是使用第 3 方包：

showSearch(context: context, delegate: ListSearchDelegate());

然后 class 扩展 SearchDelegate:

class ListSearchDelegate extends SearchDelegate{

  ListSearchDelegate({Key key,}): super() ;

  List<String> listItems = <String>['One', 'Two', 'Three', 'Four', 'Five'] ;

  @override
  List<Widget> buildActions(BuildContext context) {

    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () {
          query = '';
        },
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        close(context, null);
      },
    );
  }

  @override
  Widget buildResults(BuildContext context) {

    List<String> subList ;

    subList = query != '' ? listItems.where((item) => item.contains(query)).toList() : 
      listItems ;

    return ListView.builder(
        itemCount: subList.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(subList[index]),
          );
        }
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return Container();
  }

}

在 Flutter 中可以使用带有 ListView 的搜索栏吗？

Search bar with ListView possible in Flutter?

list

searchbar

flutter