如何创建搜索栏和列表（使用 FireStore 中的 StreamBuilder 和 Listview 创建）一起滚动？

Posted 2023-02-23

【中文标题】如何创建搜索栏和列表（使用 FireStore 中的 StreamBuilder 和 Listview 创建）一起滚动？

【英文标题】：How to create a search bar and list (created with StreamBuilder and Listview from FireStore) scroll together?

【发布时间】：2020-05-18 03:41:12

【问题描述】：

我对颤振/飞镖相对较新，我正在尝试让我的一个页面上的格式正常工作。我想在顶部有一个搜索栏，后跟一个列表（填充来自 Firestore 的信息），我想让它们一起滚动，而不仅仅是列表。

到目前为止，这是我的一段代码：

  return Column (children: <Widget>[
    TextField(
        controller: _controller,
        onSubmitted: (String value) async 
          await showDialog<void>(
            context: context,
            builder: (BuildContext context) 
              return AlertDialog(
                title: const Text('Thanks!'),
                content: Text('You typed "$value".'),
                actions: <Widget>[
                  FlatButton(
                    onPressed: () 
                      Navigator.pop(context);
                    ,
                    child: const Text('OK'),
                  ),
                ],
              );
            ,
          );
        ),
    Expanded(child: buildLearnCards(context))
  ]);


Widget buildLearnCards(BuildContext context) 
  return StreamBuilder(

我该怎么办？

【参考方案1】：

我将尝试对如何实现这一点进行广泛描述，因为它需要一些基础架构和状态管理知识。我建议使用provider 来管理状态。在您的提供者/模型的构造函数中，从 Firestore 中检索文档列表并将其存储在列表中。然后使用此tutorial 根据搜索文本字段过滤您的文档。每次调用filterSearchResults 方法时，请在函数末尾调用notifyListeners()。然后在您的小部件中的文档列表中使用this 教程中提到的Consumer 从您的提供程序中检索文档列表并根据需要显示在ListView 中。希望对您有所帮助，如果您遇到问题，请提出任何问题。