Question

我正在为我的应用程序创建一个新闻提要，并在向下滚动时从Firestore提取数据。当我向上滚动列表视图时，它会立即跳到最顶部，从而跳过它们之间的所有其他项。如果我向列表视图加载静态数据，则该列表视图工作正常，但是当我从Firestore中提取数据时，该问题再次出现。我不确定是什么原因导致了这种行为。

Video demonstrating the irregular scrolling behaviour

这是我的代码

return StreamBuilder(
            stream: Firestore.instance.collection(Constants.NEWS_FEED_NODE)
                .document("m9yyOjsPxV06BrxUtHdp").
            collection(Constants.POSTS_NODE).orderBy("timestamp",descending: true).snapshots(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (!snapshot.hasData)
                return Center(child: CircularProgressIndicator(),);

              if (snapshot.data.documents.length == 0)
                return Container();
              //after getting the post ids, we then make a call to FireStore again
              //to retrieve the details of the individual posts
              return ListView.builder(
                  itemCount: snapshot.data.documents.length,
                  itemBuilder: (_, int index) {
                    return FeedItem2(feed: Feed.fireStore(
                        snapshot: snapshot.data.documents[index]),);
                  });
            },
          );

Answer 1

只需将最顶部的小部件包装在 SingleChildScrollView() 中即可。

Answer 2

Solution这个问题。

ListView和一般ScrollViews倾向于处理当前在屏幕上不可见的子级。当我们尝试滚动回到子级时，将从头开始重新初始化该子级。但是在这种情况下，我们的孩子是FutureBuilder。重新初始化它仅在不到一秒钟的时间内再次创建了进度指示器，然后再次创建了页面。这会混淆滚动机制，以不确定的方式将我们扔掉。

Answer 3

使用Flutter 1.17.3遇到了同样的问题。基于@ Ashton-Thomas在这里的评论：Flutter ListView Jumps To Top我添加了：

cacheExtent: estimatedCellHeight * numberOfItems,

给我的ListView构造函数，问题消失了。它也大大提高了整个列表的响应速度。

注意：我的列表中只有大约50个项目，因此cacheExtent并不是很高。如果您有成百上千的项目，可能需要进行调整。

Answer 4

这个问题有两种解决方案：

方案一：（如果ListView的高度是动态的）

用 ListView 包裹 SingleChildScrollView
将 ListView 的 physics: const NeverScrollableScrollPhysics() 属性设置为提到
设置 shrinkWrap: true 以避免渲染问题

或

解决方案 2：（如果 ListView 的高度已知或可预测）

将 cacheExtent: 设置为 ListView 的高度 - 它是一个 double 值。
例如 - 如果 ListView 中存在 10 个项目且每个项目的高度为 20.0，则给出 cacheExtent: 200.0

Flutter ListView跳到顶部

4 个答案: