带有过滤器的 Flutter Firebase 列表视图

Question

我在 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),
                value: value,
              ))
          .toList(),
    );
  }

  @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),
                          ),
                        ]));
                  });
            }
          }),
    );
  }
}

Answer 1

Flutter 缓存小部件以避免不必要的重建。当它第二次构建 ListPage() 时，它看到参数没有改变，因为没有参数，并重用第一次构建的缓存版本。将全局变量转换为参数，你应该没问题。

带有过滤器的 Flutter Firebase 列表视图

Flutter Firebase listview with filters

listview

dropdown

flutter

google-cloud-firestore