Flutter - 如何创建无限可上下滚动的列表

Question

我想创建一个无限滚动列表，就像可以使用

ListView.builder

:

ListView.builder(
  itemBuilder: (context, index) => Text(index.toString()),
);

但是这样做只会在“一个方向”（向下）创建一个无限列表：

index

只能是

0 <= index

。

我还希望能够向上滚动，这相当于

index

可能为负数。

有没有内置的小部件？我什么也没找到，甚至在碎片中也找不到：

• ListView

• SliverChildBuilderDelegate

Answer 1

我不知道这是否是最时尚的解决方案，但您可以向 ScrollController 添加一个侦听器，检查是否

_controller.position.pixels <= _controller.position.minScrollExtent

，然后将您想要在当前索引“上方”的数据添加到 ListView.builder 的列表中然后使用 ScrollController 跳转到插入数据之前的位置。

为了更轻松地滚动回正确的项目，您可以使用scrollable_positioned_list包，如here。

我没有测试这是否会导致明显的抖动，但也许值得一试。

Answer 2

您可以将

CustomScrollView

与

anchor: 0.5

一起使用：

您可以查看 growthDirection 属性 dartpad 示例。

或者这是一个简化的示例：

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({
    super.key,
  });

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final UniqueKey _center = UniqueKey();

  final _controller = ScrollController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      controller: _controller,
      anchor: 0.5,
      center: _center,
      slivers: [
        SliverList.builder(
          itemBuilder: (context, index) {
            return ListTile(
              title: Text((index + 1).toString()),
            );
          },
        ),
        SliverToBoxAdapter(
          // This sliver will be located at the anchor. The scroll position
          // will progress in either direction from this point.
          key: _center,
          child: const ListTile(
            title: Text('0'),
          ),
        ),
        SliverList.builder(
          itemBuilder: (context, index) {
            return ListTile(
              title: Text((index + 1).toString()),
            );
          },
        ),
      ],
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: MyWidget(),
      ),
    ),
  );
}

我看起来像这样：

并允许您无限上下滚动。

Answer 3

没有任何编程语言允许我们使用负索引值。但它们在不同语言中具有不同的功能（在 Python 中，您用 -1 指代最后一个对象，用 -2 指代倒数第二个对象）。但 Dart 不支持负索引，因此列表也不支持负索引。

我认为你想要做的就是组合两个“无限”列表/数组。我建议您使用两个列表。使用

shrinkWrap: true  and physics: const NeverScrollableScrollPhysics()

在两个列表中并用 SingleChildScrollView 包裹它们。

为了给您更好的帮助，我需要更多信息。但这应该是一开始的事情。