时间戳

首页 > 解决方案 > Listview搜索在列表中找不到数据

flutter - Listview搜索在列表中找不到数据

问题描述

我正在尝试为 SW Api 中的字符添加名称搜索，但由于某种原因搜索不起作用，有人可以告诉我错误在哪里吗？也许问题出在列表本身？

class _SWMainState extends State<SWMain> {
  Icon customIcon = Icon(Icons.search);
  static Text titleText = Text("Star Wars API");
  Widget customSearchBar = titleText;
  var search = List<Character>();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: customSearchBar,
          actions: <Widget>[
            IconButton(
                icon: customIcon,
                onPressed: () {
                  setState(() {
                    if (this.customIcon.icon == Icons.search) {
                      this.customIcon = Icon(Icons.cancel);
                      this.customSearchBar = TextField(
                        textInputAction: TextInputAction.go,
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: "Search character"),
                        onChanged: (text) {
                          text = text.toLowerCase();
                          search = search.where((search) {
                            var charTitle = search.name.toLowerCase();
                            return charTitle.contains(text);
                          }).toList();
                        },
                        style: TextStyle(color: Colors.white, fontSize: 16),
                      );
                    } else {
                      this.customIcon = Icon(Icons.search);
                      this.customSearchBar = titleText;
                    }
                  });
                })
          ],
        ),
      ),
    );
  }
}

标签： flutterdart

解决方案

首先，flutter 中的每个搜索实现都需要一个 Search Delegate 来负责渲染 Search Results Widget。

在这种情况下，您可以像这样创建一个委托类：

class CustomSearchItemsDelegate extends SearchDelegate {
  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () {
          query = 'My Query coming from Variable';
        },
      ),
    ];
  }

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

  @override
  Widget buildResults(BuildContext context) {
    if (query.length == 0) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: Text(
              "Please enter an appropriate search field...",
            ),
          )
        ],
      );
    }

    return Column(
      children: <Widget>[
       //Render the Search Results Widget here if any exist
      ],
    );
  }

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

然后在您负责调用搜索的类 Widget 中，添加以下内容：

await showSearch(
        query: "My Search Query...", context: context, delegate: CustomSearchItemsDelegate());

所以你最终状态的组件类将是：

class _SWMainState extends State<SWMain> {
  Icon customIcon = Icon(Icons.search);
  static Text titleText = Text("Star Wars API");
  Widget customSearchBar = titleText;
  var search = List<Character>();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: customSearchBar,
          actions: <Widget>[
            IconButton(
                icon: customIcon,
                onPressed: () async {
                     await showSearch(query: "My Search Query...", context:context, delegate: CustomSearchItemsDelegate()); //Let the search delegate manage the UI 
                  });
                })
          ],
        ),
      ),
    );
  }
}

然后就让CustomSearchItemsDelegate管理 UI 和它自己的状态管理

推荐阅读