底部出现了620像素的RenderFlex溢出问题

Question

******更新********

以下是更新的body，解决了之前下面发布的滚动问题，但现在出现了底部溢出了620像素的RenderFlex。我用body: Column替换了body: listView。我知道这是一个非常普遍的问题，根据logcat，解决方案是将内容包装在Expanded小部件中。在我的情况下，我想知道在哪里使用“Expanded”小部件来解决这个问题。

---

Widget reviewsSection = Container(
        child: FutureBuilder(
            future: _fetchReviews(),
            builder: (context, snapshot) {
              if (snapshot.data != null) {
                return _buildReviewTiles(snapshot.data);
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}',
                    style: TextStyle(color: Colors.black, fontSize: 12.0),
                    textAlign: TextAlign.justify);
              }
              // By default, show a loading spinner
              return new Container(child: new CircularProgressIndicator());
            }));

// Creates a list view based on the reviews in the reviewList.
  Widget _buildReviewTiles(List<Review> list) {
    return (new Container(
      child: ListView.builder(
          shrinkWrap: true,
          itemCount: reviewList == null ? 0 : reviewList.length,
          itemBuilder: (BuildContext context, int index) {
            return new Container(
                child: Center(
                    child: Column(children: <Widget>[
              _getReviewTile(reviewList[index]),
              new Padding(
                padding: EdgeInsets.all(5.0),
              ),
              new Divider(
                height: 3.0,
                color: Colors.black26,
              )
            ])));
          }),
    ));
  }

// Returns a list tile representation of a review
  Widget _getReviewTile(Review review) {
    // Keep only the day, month, and year
    var date = review.created.split(" ")[0];
    return new Container(
      color: Colors.yellow,
      child: new Row(
        children: <Widget>[
          new Expanded(
            child: ListTile(
              leading: new Column(children: <Widget>[
                const Icon(Icons.stars),
              ]),
              subtitle: new Text(
                '${review.review}',
                style: TextStyle(color: Colors.black, fontSize: 14.0),
              ),
              title: new Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        new Text(date, style: new TextStyle(fontSize: 12.0)),
                        new Padding(
                          padding: EdgeInsets.all(4.0),
                        ),
                      ],
                    ),
                  ),
                  new Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: <Widget>[
                        new StarRating(
                          starCount: 5,
                          rating: review.rating + 0.0,
                          color: Colors.amber,
                        ),
                      ]),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

这是我的Scaffold代码，它使用reviewsSection和其他部分：

return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                background: FadeInImage.assetNetwork(
                    placeholder: 'assets/header_bg.png',
                    width: 600.0,
                    height: 240.0,
                    fit: BoxFit.cover,
                    image: 'https:' + pro.profilePhoto),
              ),
            ),
          ];
        },
        body: Column(
          children: <Widget>[
            new Container(
              color: Colors.black87,
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Padding(
                          padding: new EdgeInsets.fromLTRB(5.0, 8.0, 10.0, 5.0),
                        ),
                        new Text(
                          '${pro.fullname}',
                          style: TextStyle(fontSize: 18.0, color: Colors.white),
                        ),
                        new Text(
                          '${pro.company}',
                          style: TextStyle(fontSize: 14.0, color: Colors.white),
                        ),
                        Padding(
                          padding: EdgeInsets.all(5.0),
                        )
                      ],
                    ),
                  ),
                  new Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Padding(
                        padding: new EdgeInsets.fromLTRB(5.0, 8.0, 10.0, 5.0),
                      ),
                      new StarRating(
                        starCount: 5,
                        rating: pro.rating,
                        color: Colors.amber,
                      ),
                      new Text(
                        '${pro.reviewCount} reviews',
                        style: TextStyle(fontSize: 14.0, color: Colors.white),
                      ),
                      Padding(
                        padding: EdgeInsets.all(5.0),
                      )
                    ],
                  ),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.all(5.0),
            ),
            buttonSection,
            Padding(
              padding: EdgeInsets.all(2.0),
            ),
            Divider(color: Colors.black26, height: 0.5),
            Padding(
              padding: EdgeInsets.all(4.0),
            ),
            experienceSection,
            Padding(
              padding: EdgeInsets.all(8.0),
            ),
            reviewsSection
          ],
        ),
      ),
    );
  }

- Darshan

---

为什么需要将ListView包装在Container中？尝试移除Container。 - Andrii Turkovskyi

从_buildReviewTiles方法中删除Container？还是从reviewsSection中删除？我在_buildReviewTiles中尝试了，但结果相同。没有滚动。@AndreyTurkovsky - Darshan

请粘贴更多的代码——您在哪里使用“reviewsSection”？ - Andrii Turkovskyi

更新了我的原始问题，并附加了更多的代码。@AndreyTurkovsky - Darshan

尝试将reviewsSection包装在Expanded中。并且移除FutureBuilder和ListViewBuilder周围的容器。 - anmol.majhail

Answer 1

我重新发布了由@anmol.majhail建议的答案，这帮助我解决了问题。

"尝试将reviewsSection包装在Expanded中。并删除FutureBuilder和ListViewBuilder周围的容器。"

所以正确的 reviewsSection 代码如下:

Widget reviewsSection = Expanded(
        child: FutureBuilder(
            future: _fetchReviews(),
            builder: (context, snapshot) {
              if (snapshot.data != null) {
                return _buildReviewTiles(snapshot.data);
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}',
                    style: TextStyle(color: Colors.black, fontSize: 12.0),
                    textAlign: TextAlign.justify);
              }
              // By default, show a loading spinner
              return Center(child: CircularProgressIndicator());
            }));

- Darshan