将SliverFillRemaining与CustomScrollView和SliverList一起使用

Question

我试图创建一个滚动列表，可以在滚动列表的底部有一个页脚。如果列表未填满所有垂直屏幕空间，则页脚将需要向下移动到页面底部。

我尝试在SliverList中使用SliverFillRemaining和CustomScrollView来实现此功能，但SliverFillRemaining显示了我认为的一些意外行为。它填补了比需要更多的空间（参见gif）。

我使用以下代码创建此列表：

child: new CustomScrollView(
  slivers: <Widget>[
    new SliverList(
      delegate: new SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return new Card(
            child: new Container(
              padding: new EdgeInsets.all(20.0),
              child: new Center(child: new Text("Card $index")),
            ),
          );
        },
        childCount: 3,
      ),
    ),
    new SliverPadding(
      padding: new EdgeInsets.all(5.0),
    ),
    new SliverFillRemaining(
      child: new Container(
        color: Colors.red,
      ),
    )
  ],
)

Answer 1

SliverFillRemaining将自动调整大小以填充最后一个列表项底部和视口底部之间的空间。有关代码，请参阅performLayout SliverFillRemaining方法：

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/rendering/sliver_fill.dart#L118

我认为你不能用它来达到你想要的效果，尽管你可以创建一个可以工作的子类。

Answer 2

对于正在寻找此问题答案的任何人，我有一个解决方案，只要我需要类似的东西，它就一直运行良好。

我是这样管理的：

class ScrollOrFitBottom extends StatelessWidget {
  final Widget scrollableContent;
  final Widget bottomContent;

  ScrollOrFitBottom({this.scrollableContent, this.bottomContent});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverFillRemaining(
          hasScrollBody: false,
          child: Column(
            children: <Widget>[
              Expanded(child: scrollableContent),
              bottomContent
            ],
          ),
        ),
      ],
    );
  }
}

顾名思义，如果内容太多，它会滚动，否则会被推到底部。

我认为这很简单且不言自明，但如果您有任何问题，请告诉我

示例：https://codepen.io/lazarohcm/pen/xxdWJxb