Flutter中如何获取StoryView当前显示项的索引？

要拿到当前屏幕显示的图片在列表里的索引，给你两种实用的方法：

方法一：利用onStoryShow回调直接获取 #

onStoryShow会在每个Story项显示时触发，你可以通过回调里的StoryItem对象，结合你的图片列表找到对应索引：

StoryView(
  storyItems: images
      .map((e) => StoryItem.pageImage(
            url: e,
            controller: newController,
          ))
      .toList(),
  // 修改onStoryShow回调
  onStoryShow: (s) {
    // 确认当前项是图片类型的StoryItem
    if (s is StoryItem && s.url != null) {
      final currentIndex = images.indexOf(s.url!);
      print("当前显示的图片索引：$currentIndex");
      // 这里可以把currentIndex存到变量里供后续使用
    }
  },
  onComplete: () {
    print("Completed a cycle");
    Navigator.pop(context);
  },
  onVerticalSwipeComplete: (direction) {
    if (direction == Direction.down) {
      Navigator.pop(context);
    }
  },
  progressPosition: ProgressPosition.top,
  repeat: false,
  controller: storyController,
),

注意：如果你的图片列表里有重复的URL，indexOf只会返回第一个匹配项的索引，这种情况建议给每个StoryItem绑定唯一标识（比如在创建时把索引存到StoryItem的caption或者自定义属性里）。

方法二：监听StoryController的索引变化 #

StoryController自带currentIndex属性，你可以通过监听控制器的状态变化来实时获取当前索引：

首先在页面的initState里添加监听：

@override
void initState() {
  super.initState();
  // 监听控制器的状态变化
  storyController.addListener(() {
    final currentIndex = storyController.currentIndex;
    print("当前索引：$currentIndex");
    // 这里处理索引变化的逻辑
  });
}

@override
void dispose() {
  // 记得销毁控制器，避免内存泄漏
  storyController.dispose();
  super.dispose();
}

然后你的StoryView代码不需要改动，只要保证使用的是同一个storyController即可。

内容的提问来源于stack exchange，提问作者Khawaja Khall