flutter - 如何在 Flutter 的屏幕顶部加载更多内容？

Question

如何将屏幕顶部的更多项目加载到 ListView 小部件中，并从加载更多项目之前的位置继续滚动？

我知道如何检测 ListView 的底部或列表的顶部。像这样：

_scrollListener() {
    if (_controller.offset >= _controller.position.maxScrollExtent &&
        !_controller.position.outOfRange) {
      setState(() {
        // reach the bottom - load more items
      });
    }
    if (_controller.offset <= _controller.position.minScrollExtent &&
        !_controller.position.outOfRange) {
      setState(() {
        //reach the top - load more items
      });
    }
  }

因此，当我在列表底部加载数据时，新项目只是附加到现有列表中，看起来很自然，因为用户可以继续向下滚动而不会出现任何问题。

问题是：当我更新项目列表时，滚动从屏幕顶部（0 像素位置）开始，而不是从项目的位置开始，我在加载更多项目之前是正确的。

我试过的：我试过计算加载项的高度，然后跳转到以像素为单位的计算范围，但效果不佳，因为我的 ListView 中元素的大小可以是动态的，这会计算我必须滚动的像素数错误。

问题如下：如何在将项目加载到列表开头时实现相同的 ListView 行为？

标签： flutterdart

Answer 1

您可以使用类似于此处描述的方法：https ://github.com/flutter/flutter/issues/12319#issuecomment-488170337

写这样的东西：

      CustomScrollView(center: aKey, slivers: [
        SliverList(
          delegate: SliverChildListDelegate(
            [...new items...].reversed.toList(),  
          ),
        ),
        SliverList(
          key: aKey,
          delegate: SliverChildListDelegate(
            [...old items...],
          ),
        ),
      ]);

您可以使用有意义的代表类型。然后滚动偏移量为 0 应该将旧的第一项放在顶部。