将SearchField添加到从Firestore读取的StreamBuilder中 [英] Adding SearchField to StreamBuilder Reading from Firestore

问题描述

我有一个程序，可以从Firebase的云Firestore获取用户列表，并使用Flutter中的StreamBuilder在Listview中显示它们.用户数量将很大，我想在我的streambuilder中实现一个搜索字段，该查询字段将查询与我的搜索字段匹配的结果.我希望它看起来像这样:

I have a program that I get a list of users from Firebase's cloud Firestore, and display them in a Listview using a StreamBuilder in Flutter. The number of users will be large, and I want to implement a search field in my streambuilder that will query results that match my search field. I want it to look like this:

-照片来源: https://blog.usejournal.com/flutter-search-in-listview-1ffa40956685

我的Streambuilder如下所示:

My Streambuilder that looks like the following:

StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance
            .collection('users')
            .snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
          switch (snapshot.connectionState) {
            case ConnectionState.waiting:
              return Center(
                child: Column(
                  children: <Widget>[
                    CircularProgressIndicator(),
                    Text('Loading'),
                  ],
                ),
              );
            default:
              return Container(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ListView.separated(
                      shrinkWrap: true,
                      padding: EdgeInsets.all(10.0),
                      itemCount: snapshot.data.documents.length,
                      itemBuilder: (context, index) {
                        return buildUserRow(snapshot.data.documents[index]);
                      },
                      separatorBuilder: (context, index) {
                        return Divider();
                      },
                    ),
                  ],
                ),
              );
          }
        })

因此，我想将此StreamBuilder用作我的数据源，并通过文档快照的'name'属性进行搜索.任何帮助，我们将不胜感激.

So I want to use this StreamBuilder as my data source, and search by the Document Snapshot's 'name' property. Any help is greatly appreciated.

推荐答案

使用Firestore实际上很容易

It actually gets easy with Firestore

在字符串字段上添加条件.如果包含搜索字符串，请返回小部件.

Add if condition on the string field. If it contains the search string, return widget.

这不是最终代码，您将不得不进行许多更改.但这是可以做到的.

This is not the final code, you will have to make many changes. But this is how it can be done.

ListView.separated(
        shrinkWrap: true,
        padding: EdgeInsets.all(10.0),
        itemCount: snapshot.data.documents.length,
        itemBuilder: (context, index) {
          if (snapshot.data.documents[index].contains(youSearchString))
            return buildUserRow(snapshot.data.documents[index]);
        },
        separatorBuilder: (context, index) {
          return Divider();
        })

这篇关于将SearchField添加到从Firestore读取的StreamBuilder中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！