Flutter ListView 跳转到顶部

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

这个问题有2个解决方案：

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

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

或

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

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

Answer 2

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

Answer 3

刚刚在使用 Flutter 1.17.3 时遇到了同样的问题。基于@Ashton-Thomas 的评论：Flutter ListView Jumps To Top 我补充说：

cacheExtent: estimatedCellHeight * numberOfItems,

到我的ListView 构造函数，问题就消失了。它也大大提高了整个列表的响应能力。

注意：我的列表中只有大约 50 项，所以cacheExtent 不是很高。如果您有数百/数千个项目，可能需要调整。

Answer 4

问题原因：

ListView 和ScrollViews 通常倾向于丢弃当前在屏幕上不可见的子项。当我们尝试滚动回孩子时，孩子会从头开始重新初始化。但是在这种情况下，我们的孩子是一个 FutureBuilder；重新初始化它会在几秒钟内再次创建一个进度指示器，然后再次创建页面。这会混淆滚动机制，让我们以不确定的方式四处游荡。

Solution:

解决此问题的一种方法是确保进度指示器具有与页面完全相同的大小，但在大多数情况下，这不太实用。因此，我们将采用一种效率较低但可以解决我们的问题的方法；我们将阻止 ListView 处理孩子。为了做到这一点，我们需要用AutomaticKeepAliveClientMixin 包装每个孩子——即每个FutureBuilder。这个mixin让孩子们要求他们的父母让他们即使在屏幕外也能活着，这将解决我们的问题。所以：

1. 将代码中的 FutureBuilder 替换为 KeepAliveFutureBuilder。
2. 创建 KeepAliveFutureBuilder 小部件：

class KeepAliveFutureBuilder extends StatefulWidget {

  final Future future;
  final AsyncWidgetBuilder builder;

  KeepAliveFutureBuilder({
    this.future,
    this.builder
  });

  @override
  _KeepAliveFutureBuilderState createState() => _KeepAliveFutureBuilderState();
}

class _KeepAliveFutureBuilderState extends State<KeepAliveFutureBuilder> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: widget.future,
      builder: widget.builder,
    );
  }

  @override
  bool get wantKeepAlive => true;
}

• 这个小部件只是 FutureBuilder 的一个包装器。它是一个 StatefulWidget，其 State 使用 AutomaticKeepAliveClientMixin 扩展了 State 类。
• 它实现了 wantKeppAlive getter，并使其简单地返回 true，以向 ListView 表示我们希望这个孩子保持活动状态。