flutter - 底部溢出 620 像素的 RenderFlex

Question

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

这是更新后的 body，它解决了下面之前发布的滚动问题，但现在 A RenderFlex 在底部溢出了 620 像素。我将 body: listView 替换为 body: Column。我知道这是一个非常常见的问题，根据 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
          ],
        ),
      ),
    );
  }

Answer 1

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

“尝试换行 - Expanded 中的 reviewSection。并删除 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());
            }));