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

2024-05-08 • 问答

我试图弄清楚如何从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（）来包装其中的一部分，但是我不确定在哪里。

感谢您的快速澄清。

这里发生的事情是您将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渲染列表基于下拉菜单中的条件

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

大家都在问