将 SliverFillRemaining 与 CustomScrollView 和 SliverList 一起使用

Question

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

我尝试在CustomScrollView 中使用SliverList 和SliverFillRemaining 来实现这一点，但我相信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 将自动调整大小以填充最后一个列表项底部和视口底部之间的空间。代码见SliverFillRemaining的performLayout方法：

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

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

Answer 3

查看我的回答 here 和 Gist 文件 here。它可能会引导你走向正确的方向。

@override
Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      return SingleChildScrollView(
        child: ConstrainedBox(
          constraints: constraints.copyWith(
            minHeight: constraints.maxHeight,
            maxHeight: double.infinity,
          ),
          child: IntrinsicHeight(
            child: Column(
              children: <Widget>[
                Container(height: 200, color: Colors.blue),
                Container(height: 200, color: Colors.orange),
                Container(height: 200, color: Colors.green),
                Container(height: 50, color: Colors.pink),
                Expanded(
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      width: double.infinity,
                      color: Colors.red,
                      padding: EdgeInsets.all(12.0),
                      child: Text('FOOTER', textAlign: TextAlign.center,),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
  );
}