dart - 将 SliverFillRemaining 与 CustomScrollView 和 SliverList 一起使用

标签 dart flutter

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

我尝试在 CustomScrollView 中使用 SliverListSliverFillRemaining 来实现此功能,但 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,
      ),
    )
  ],
)

Image showing what is wrong with the listview

最佳答案

对于任何正在寻找这个问题的答案的人,我有一个解决方案,只要我需要类似的东西,它就可以很好地工作。

这就是我的管理方式:

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

关于dart - 将 SliverFillRemaining 与 CustomScrollView 和 SliverList 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49602695/

相关文章:

animation - 如何检查AnimatedContainer是否完全动画?

firebase - FutureBuilder 的嵌套 future

dart - Flutter - 如何从类型实例化对象

dart - 滑动返回手势 flutter

flutter - 为什么riverpod甚至无法在项目中初始化?找不到方法 : 'Error.throwWithStackTrace'

flutter - 如何在 Flutter 中启用 Null-Safety?

android-studio - Dart 映射键类型安全

显示后 Flutter 更改对话框高度

sql - Flutter将列表映射到对象

flutter - 如何将 JSON 响应传递到另一个 View