将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

对于任何正在寻找此问题答案的人，我有一个解决方案，每当我需要类似的东西时，该解决方案都运行良好。

这就是我的管理方式：

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

Answer 2

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

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

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