【问题标题】:How can I filter my StreamBuilder-list with a textfield?如何使用文本字段过滤我的 StreamBuilder 列表?
【发布时间】:2021-10-01 09:06:28
【问题描述】:

我正在制作一个关于希腊克里特岛的应用程序,其中包含岛上的所有景点。 在我的底部导航中,我有一个选项卡可以进入一个新屏幕,在应用栏中有一个 TextField,在正文中我有我的完整列表(Firestore > Streambuilder > ListViewBuilder)。当我单击其中一项时,它会重定向到详细信息页面。

为了更容易搜索,我希望能够在用户开始在文本字段中输入时过滤列表。

我似乎无法理解它,因为我也在使用详细信息页面......这是我目前所拥有的:

StreamBuilder(
                stream: FirebaseFirestore.instance.collection('Crete').orderBy('name', descending: false).snapshots(),
                builder: (context, snapshot) {
                  if (!snapshot.hasData) return const Center(child: CircularProgressIndicator(),);
                  return Container(
                    child: ListView.builder(
                      shrinkWrap: true,
                      clipBehavior: Clip.none,
                      physics: NeverScrollableScrollPhysics(),
                      scrollDirection: Axis.vertical,
                      itemCount: snapshot.data.docs.length,
                      itemBuilder: (BuildContext context, index) => _buildListItemCrete(context, snapshot.data.docs[index]),
                    ),
                  );
                },
              ),

然后是TextField:

TextField(
            onChanged: (String value) {
              setState(() {
                searchResult = value;
              });
            },),

还有这个:

TextEditingController _searchController = TextEditingController();

  String searchResult = '';

  @override
  void initState(){
    super.initState();
    _searchController.addListener(_onSearchChanged);
  }

  @override
  void dispose(){
    _searchController.removeListener(_onSearchChanged);
    _searchController.dispose();
    super.dispose();
  }

  _onSearchChanged(){
    print(_searchController.text);
  }

如何通过在文本字段中输入来过滤列表?

【问题讨论】:

    标签: flutter listview textfield stream-builder


    【解决方案1】:

    我终于在this fantastic tutorial找到了解决办法。

    诀窍是将流构建器更改为 listview.builder 并从我的快照集合创建一个列表。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-05-05
      • 1970-01-01
      • 2016-10-27
      • 2021-06-10
      • 1970-01-01
      • 2012-10-03
      • 2020-08-06
      • 1970-01-01
      相关资源
      最近更新 更多