繁体   English   中英

(颤振)无限滚动“ListView.builder”,内容有限

[英](Flutter) Infinite Scroll `ListView.builder` with Finite Content

1.问题

如何让我的ListView.builder能够滚动到顶部和底部的空白空间?

例如,我有一个自定义小部件列表,我希望用户能够通过滚动到列表中的顶部卡片(位于屏幕顶部)更靠近他的拇指,同时Flutter呈现背景为空的顶部空间。

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

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

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

到目前为止,我已经尝试摆弄ListView.builder的一些属性以及一些解决方法:

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

如果我理解正确,您最好的选择是在SliverAppBar中使用具有可扩展空间的CustomScrollView

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,
          ),
        ),
      ]
    ),
  );
}

这可以通过您的“ Container解决方法”来实现。 您可以使用ScrollController并将其initialScrollOffset放在顶部Container结束处。 这是我后来通过另一个 StackOverflow 问题才发现的。

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM