flutter - 如何在 flutter 中显示 scrollController 的滚动索引？

Question

我想使用 scrollController 在 listView 的底部显示索引，如下图所示:

在用户向下滚动或向上滚动后，左侧以红色突出显示的计数会根据用户的滚动方向增加/减少。

我要实现的是自动更新显示项的索引，在图片上用红色表示。因此，每当用户向下或向上滚动时，该索引就会根据显示项目的索引进行更新。

图片显示我已经到了第26条。每当我向下或向上滚动时，该索引都会更新。

我曾尝试使用为滚动事件发出的偏移量，但没有成功。

Answer 1

方法是像您一样使用滚动 Controller 。

您需要使用已知的项目大小和监听器。

// Declaring the controller and the item size
ScrollController _scrollController;
final itemSize = 100.0;

// Initializing
@override
void initState() {
  _scrollController = ScrollController();
  _scrollController.addListener(_scrollListener);
  super.initState();
}

// Your list widget (must not be nested lists)
ListView.builder(
      controller: _scrollController,
      itemCount: <Your list length>,
      itemExtent: itemSize,
      itemBuilder: (context, index) {
          return ListTile(<your items>);
      },
),

// With the listener and the itemSize, you can calculate which item
// is on screen using the provided callBack. Something like this:
void _scrollListener() {
  setState(() {
    var index = (_scrollController.offset / itemSize).round() + 1;
  });
}

将监听器添加到 scrollController 将在每次滚动列表时调用提供的回调。您可以使用相同的逻辑处理列表的许多行为，包括识别触发监听器的事件类型、滚动方向等。