Question

我试图弄清楚如何从firebase中的特定集合中呈现列表，以及如何从下拉菜单中选择选项时更改该列表。我可以在1个收藏夹上显示列表，但是当我添加下拉菜单时，默认值为“丢失”，则不会显示任何内容。到目前为止，这是我目前可以使用的功能，但不完全是我想要的功能。

class _ListPageState extends State<ListPage>{
  List<String> _type = ['lost', 'found'];
  String _selectedView = 'lost';

//this getData pulls from 'lost' collection, since I set _selectedView to lost by default
  Future getData() async{
    var firestore = Firestore.instance;
    QuerySnapshot qn = await firestore.collection(_selectedView).getDocuments();
    return qn.documents;
  }

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

    return new DropdownButtonFormField(
      value: _selectedView,
      onChanged: (newValue) {
        setState(() {
          _selectedView = newValue;
        });
      },
      items: _type.map((view) {
        return new DropdownMenuItem(
          child: new Text(view),
          value: view,
        );
      }).toList(),
    );
  }
  @override
  Widget build(BuildContext context){
    return ListView(
      children: <Widget>[
        _viewType(),
        FutureBuilder(//it's not rendering any of this when adding the dropdown above it
          future: getData(),
          builder: (_, snapshot){
        if(snapshot.connectionState == ConnectionState.waiting){
          return Center(
            child: Text("Loading"),
          );
        }
        else{
          return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (_, index){
              return ListTile(
                title: Text(snapshot.data[index].data["Title"]),
                onTap: () => navigateToDetail(snapshot.data[index]),
              );
          });

        }
      }),]
    );
  }
}

在此先感谢您的帮助。如果您想查看更多代码，请告诉我。我必须用setState（）来包装其中的一部分，但是我不确定在哪里。

Answer 1

感谢您的快速澄清。

这里发生的事情是您将ListView放在了ListView内。您应该使用Column。

默认情况下（如documentation中所述）：

“列”窗口小部件不滚动（通常，在“列”中有更多子级超出可用房间的容纳范围是错误的）。如果您有一行小部件，并希望它们在空间不足时能够滚动，请考虑使用ListView。

在您的情况下，您想要放置一个ListView，它将使无法滚动的Column溢出。为避免这种情况，请考虑使用Expanded 占用剩余空间，以便以某种方式限制高度，并且ListView知道其限制并可以正常工作。

class _ListPageState extends State<ListPage> {
  List<String> _type = ['lost', 'found'];
  String _selectedView = 'lost';

//this getData pulls from 'lost' collection, since I set _selectedView to lost by default
  Future getData() async {
    var firestore = Firestore.instance;
    QuerySnapshot qn = await firestore.collection(_selectedView).getDocuments();
    return qn.documents;
  }

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

  Widget _viewType() {
    return new DropdownButtonFormField(
      value: _selectedView,
      onChanged: (newValue) {
        setState(() {
          _selectedView = newValue;
        });
      },
      items: _type.map((view) {
        return new DropdownMenuItem(
          child: new Text(view),
          value: view,
        );
      }).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _viewType(),
        Expanded(
          child: FutureBuilder(
            //it's not rendering any of this when adding the dropdown above it
            future: getData(),
            builder: (_, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Center(
                  child: Text("Loading"),
                );
              } else {
                return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (_, index) {
                    return ListTile(
                      title: Text(snapshot.data[index].data["Title"]),
                      onTap: () => navigateToDetail(snapshot.data[index]),
                    );
                  },
                );
              }
            },
          ),
        ),
      ],
    );
  }
}

来自Firebase的Flutter渲染列表基于下拉菜单中的条件

1 个答案: