如何解决 ListView.builder 底部溢出问题？

Question

我遇到了概述的相同问题 here. I've tried all of the solutions provided and I'm still getting an error "RenderFlex overflowed by x pixels on the bottom". I don't have any widgets underneath the custom ListView Builder。我真的很茫然。

Widget build(BuildContext context) {
return new Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    new GradientAppBar("Twitter"),
    new Container(
      child: Flexible(
        child: Column(
          children: <Widget>[
            Container(
              padding: const EdgeInsets.only(top: 10.0, left: 10.0),
              child: UserInfoHeader(userinfo)
            ),
            PagewiseListView(
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              physics: const AlwaysScrollableScrollPhysics(),
              pageSize: 200,
              itemBuilder: (context, TwitterCardContent entry, _) {
                return TwitterCard(entry);
              },
              pageFuture: (pageIndex) {
                return getStatuses(userinfo.screenName);
              },
            )
          ],
        ),
      ), 
    ),
  ],
);

}

这里是每个列表项的内容。

Widget build(BuildContext context) {
return new Card(
  //elevation: 8.0,
  margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
  child: Container(
    decoration: new BoxDecoration(
      color: Colors.white,
      borderRadius: new BorderRadius.circular(25.0)
    ),
    child: ListTile(
      contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
      leading: Container(
        padding: EdgeInsets.only(right: 12.0),
        decoration: new BoxDecoration(
          border: new Border(
            right: new BorderSide(width: 1.0, color: Colors.white54)
          )
        ),
        child: notchecked,
      ),
      title: Text(
        statusCard.timeStampString,
        style: Theme.TextStyles.buttonText,
      ),
      subtitle: Text(
        statusCard.text,
        style: Theme.TextStyles.contentCardText,
      ),
      trailing: delete,
    ),
  ),
);

}

Answer 1

问题是您的 ListView 位于 Column 内，它具有固定的高度并且不能滚动，而 listview 可以滚动。我不确定，但更改 Column a listview 本身或将 Expanded/Flexible 与 Column 一起使用可能会奏效。

Answer 2

Column 小部件不滚动，您将该小部件作为父小部件，PageListView 作为其中的子部件。相反，将您的父 Column 小部件替换为 ListView 应该解决渲染流异常。

Answer 3

用扩展的小部件包装您的列表视图构建器。

Answer 4

只是为 Dave 的回答添加示例

   Expanded(
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: 5,
                itemBuilder: (context, index) {
                  return Container();
                }

如何解决 ListView.builder 底部溢出问题？

How to solve ListView.builder bottom overflow issue?

flutter

flutter-layout