【问题标题】：(Flutter) Infinite Scroll `ListView.builder` with Finite Content（颤振）无限滚动“ListView.builder”，内容有限
【发布时间】：2020-03-09 09:36:17
【问题描述】：

1。问题

如何让我的ListView.builder 能够滚动到顶部和底部的空白区域？

例如，我有一个自定义小部件列表，我希望用户能够通过滚动到列表中的最上面的卡片（位于屏幕顶部）更靠近他的拇指，而Flutter 用空背景渲染顶部空间。

2。到目前为止我所尝试的

我的代码的基本形式是ListView.builder构造函数的基本实现：

ListView.builder(
  itemCount: widgetsList.length,
  itemBuilder: (context, index){
    return widgetsList[index];
  },
),

到目前为止，我已经尝试摆弄一些ListView.builder's properties 以及一些解决方法：

一开始我以为shrinkWrap: true或者physics: AlwaysScrollableScrollPhysics()——也许我必须设置AlwaysScrollableScrollPhysics()的parent参数？ - 会做这项工作，但他们似乎都没有工作。
我还尝试通过在列表的顶部和底部创建空的 Containers 并添加类似 dragStartBehavior: DragStartBehavior.values[1] 之类的东西来人为地做到这一点——我不认为这就是你使用 @987654333 的方式@property 实际上 - 使列表从第二个值开始，但它不起作用。

【问题讨论】：

也许我应该选择CustomScrollView 或使用ListView 的controller 属性？

标签： listview flutter dart

【解决方案1】：

如果我理解正确，您最好使用CustomScrollView，在SliverAppBar 中有一个可扩展的空间。

Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: [
         SliverAppBar(
           automaticallyImplyLeading: false, // gets rid of the back arrow
           expandedHeight: 250, // the collapsible space you want to use 
           flexibleSpace: FlexibleSpaceBar(
             background: Container(
               color: Colors.transparent
             ),
           ),
         ),
         SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              // put your widgetsList here
            },
            childCount: widgetsList.length,
          ),
        ),
      ]
    ),
  );
}

【讨论】：

SliverAppBar 的行为显然是我想要的，盒子似乎可以灵活地上下移动。但是如何在FlexibleSpaceBar 中呈现我的小部件（卡片）列表？
你的列表在FlexibleSpaceBar之后，你在(context, index) {}里面使用SliverList
但这会使我的可滚动列表呈现在您刚刚设计的灵活高度的框下方，这不是我的想法。
你有预想的目标吗？
没什么，它只是让Flutter 在尝试使ListView 的第一项到达屏幕底部时用空白空间填充顶部。 Here 是我对 Adobe XD 所做的事情，可能会有所帮助。

【解决方案2】：

这可以通过您的“Container workaround”来实现。您可以使用ScrollController 并在顶部Container 结束的地方设置initialScrollOffset。这是我后来才发现的through this other StackOverflow question。

在您的小部件类中声明您的ScrollController。

ScrollController scrollController = ScrollController(
  initialScrollOffset: 10, // or whatever offset you wish
  keepScrollOffset: true,
);

将控制器添加到您的ListView

ListView.builder(
  controller: scrollController,
  itemCount: widgetsList.length,
  itemBuilder: (context, index){
    return widgetsList[index];
  },
),

此外，您甚至可能想要为背景滚动动作创建动画。这可以通过在小部件的initState 中使用.animateTo 方法来实现。

【讨论】：