(扑)无限滚动`ListView.builder`具有有限的内容

时间:2019-11-13 14:47:17

标签: listview flutter dart

1。问题

如何使ListView.builder能够滚动到顶部和底部的空白处?

例如,我有一个自定义窗口小部件列表,我希望用户能够通过滚动到列表上方的卡片(位于屏幕顶部)更靠近他的拇指,而Flutter则用空白背景渲染顶部空间。

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

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

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

到目前为止,我尝试摆弄一些ListView.builder's properties和一些变通办法:

  1. 起初,我以为shrinkWrap: truephysics: AlwaysScrollableScrollPhysics() —也许我必须设置parent的{​​{1}}参数? —可以胜任,但似乎都不起作用。
  2. 我还尝试通过在列表的顶部和底部创建空的AlwaysScrollableScrollPhysics()并添加Container之类的东西来人为地做到这一点,我不认为这就是您的方式实际使用dragStartBehavior: DragStartBehavior.values[1]属性-使列表从第二个值开始,但不起作用。

2 个答案:

答案 0 :(得分: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,
          ),
        ),
      ]
    ),
  );
}

答案 1 :(得分:0)

您可以通过“ Container解决方法来实现。您可以使用ScrollController并将其initialScrollOffset放在顶部Container的结尾处。我后来才发现through this other StackOverflow question

  1. 在窗口小部件的类中声明您的ScrollController
    ScrollController scrollController = ScrollController(
      initialScrollOffset: 10, // or whatever offset you wish
      keepScrollOffset: true,
    );
    
  2. 将控制器添加到您的ListView
    ListView.builder(
      controller: scrollController,
      itemCount: widgetsList.length,
      itemBuilder: (context, index){
        return widgetsList[index];
      },
    ),
    

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