flutter scrollView 不在 Stream 中滚动

Question

我正在开发一个使用 Firebase 的 Flutter 项目，它有一个 StreamBuilder，可以创建类似于博客应用程序的卡片。每当我添加大量“博客”时，我都会收到底部溢出错误，当我将 body: MemoirsList(), 包装在 SingleChildScrollView 中时，应用程序不会让我向下滚动。

这是 MemoirsList() 的代码：

  Widget MemoirsList() {
    return Container(
      child: memoirsStream != null
          ? ListView(
            shrinkWrap: true,
              children: <Widget>[
                StreamBuilder(
                  stream: memoirsStream,
                  builder: (context, snapshot) {
                    return ListView.builder(
                        padding: EdgeInsets.symmetric(horizontal: 16),
                        itemCount: snapshot.data.documents.length,
                        shrinkWrap: true,
                        itemBuilder: (context, index) {
                          return MemoirsCard(
                            authorName: snapshot.data.documents[index].data['authorName'],
                            title: snapshot.data.documents[index].data["title"],
                            description: snapshot.data.documents[index].data['description'],
                            imgUrl: snapshot.data.documents[index].data['imgURL'],
                          );
                        });
                  },
                )
              ],
            )
          : Container(
              alignment: Alignment.center,
              child: CircularProgressIndicator(),
          ),
    );
  }

MemoirsCard() 代码：

class MemoirsCard extends StatelessWidget {

  String imgUrl, title, description, authorName;
  MemoirsCard({@required this.imgUrl, @required this.title, @required this.description, @required this.authorName});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 20),
      height: 200,
      child: Stack(
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.circular(10), 
            child: Image.network(
              imgUrl, 
              width: MediaQuery.of(context).size.width,
              fit: BoxFit.cover
            )
          ),
          Container(
            height: 200,
            decoration: BoxDecoration(
              color: Colors.black54.withOpacity(0.3),
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  title,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 32,
                    fontWeight: FontWeight.w700
                  ),
                ),
                SizedBox(height: 8),
                Text(
                  description,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 15,
                    fontWeight: FontWeight.w400
                  )
                ),
              ],
            ),
          ),
        ],
      )
    );
  }
}

Answer 1

Listview.Builder inside Listview, flutter 给你的建议不是一个好的选择

只需将顶部 Listview 替换为 Column

像这样修改代码

SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    ListView.builder(
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        ...

Answer 2

这是给任何想知道的人的最终代码：

  Widget MemoirsList() {
    return SingleChildScrollView(
      child: memoirsStream != null
          ? Column(
              children: <Widget>[
                StreamBuilder(
                  stream: memoirsStream,
                  builder: (context, snapshot) {
                    if(snapshot.data == null) return CircularProgressIndicator(); //Removes called documents on null error
                    return ListView.builder(
                        padding: EdgeInsets.symmetric(horizontal: 16),
                        itemCount: snapshot.data.documents.length,
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        itemBuilder: (context, index) {
                          return MemoirsCard(
                            authorName: snapshot.data.documents[index].data['authorName'],
                            title: snapshot.data.documents[index].data["title"],
                            description: snapshot.data.documents[index].data['description'],
                            imgUrl: snapshot.data.documents[index].data['imgURL'],
                          );
                        });
                  },
                )
              ],
            )
          : Container(
              alignment: Alignment.center,
              child: CircularProgressIndicator(),
          ),
    );
  }

flutter scrollView 不在 Stream 中滚动

flutter scrollView not scrolling in Stream

scroll

overflow

scrollview

dart

flutter