带有过滤器的Flutter Firebase Listview

问题描述

我在Flutter中创建了一个列表视图，该列表视图正在从Firestore中提取数据。到这里为止一切正常，但是现在我想使用下拉列表添加一些过滤器，该过滤器将根据用户选择的下拉列表值过滤列表视图。因此，当应用程序首次加载时，列表视图会正确显示，但是当我更改下拉列表中的值时，列表不会更改。 当用户选择下拉值时，我想更新列表视图。

这是我有两个过滤器（下拉值）的应用栏。而且，当用户想要更改过滤器值（从下拉列表中）时，应更新列表。

import 'package:cloud_firestore/cloud_firestore.dart';

class LandingPage extends StatefulWidget {
  @override
  _LandingPageState createState() => _LandingPageState();
}
 String _currentlySelectedage = "2"; 
 String _currentlySelectedlanguage = "english";

  class _LandingPageState extends State<LandingPage> {
  final List<String> _dropdownValuesage = ["1","2","3"]; 
  final List<String> _dropdownValueslanguage = ["silent","english","hindi"];
 

  Widget dropdownWidgetage() {
    return DropdownButton(
      isExpanded: false,value:_currentlySelectedage,onChanged: (String newvalue) {
        setState(() {
          _currentlySelectedage = newvalue;
          print(_currentlySelectedage);
        });
      },items: _dropdownValuesage
          .map((value) => DropdownMenuItem(
                child: Text(value),value: value,))
          .toList(),);
  }

  Widget dropdownWidgetlanguage() {
    return DropdownButton(
      isExpanded: false,value:_currentlySelectedlanguage,onChanged: (String newvalue) {
        setState(() {
          _currentlySelectedlanguage = newvalue;
          print(_currentlySelectedlanguage);
        });
      },items: _dropdownValueslanguage
          .map((value) => DropdownMenuItem(
                child: Text(value),);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        centerTitle: false,title: Text('',style: TextStyle(fontFamily: 'Raleway'),),backgroundColor: Colors.teal,actions: <Widget>[
          dropdownWidgetage(),SizedBox(width:4),dropdownWidgetlanguage()
        ],body: ListPage(),);
  }
}

class ListPage extends StatefulWidget {
  @override
  _ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  Future _data;

  Future getPosts() async {
    var firestore = Firestore.instance;
    QuerySnapshot qn = await firestore
        .collection("movies")
        .where("age",arrayContains: _currentlySelectedage)
        .where("language",isEqualTo: _currentlySelectedlanguage)
        .orderBy('rank',descending: true)
        .getDocuments();
    return qn.documents;
  }

  navigatetoDetail(DocumentSnapshot post) {
    Navigator.push(
        context,MaterialPageRoute(
            builder: (context) => DetailPage(
                  post: post,)));
  }

  @override
  void initState() {
    super.initState();
    _data = getPosts();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
          future: _data,builder: (_,snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(
                child: Text("Loading...."),);
            } else {
              return ListView.builder(
                  itemCount: snapshot.data.length,itemBuilder: (_,index) {
                    return Card(
                        child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
                          InkWell(
                            onTap: () => navigatetoDetail(snapshot.data[index]),child: Image.network(
                                snapshot.data[index].data['gff']),Text(
                            snapshot.data[index].data['gfg'],style: TextStyle(
                                fontWeight: FontWeight.bold,fontSize: 20),]));
                  });
            }
          }),);
  }
}

解决方法

Flutter缓存小部件，以避免不必要的重建。第二次进行构建ListPage()时，由于没有参数，因此参数没有更改，并重用了第一个构建的缓存版本。将全局变量转换为参数，就可以了。