将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

请参阅我的回答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,),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
  );
}