簡體   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