Flutter中card_swiper组件垂直滑动索引反向实现问题

card_swiper没有内置的索引反向配置，但可以通过两种简单方式实现你要的效果：

方案1：索引值转换（无需修改数据源） #

直接在swiper的回调和数据获取逻辑中，将swiper返回的索引转换为反向索引，适配你的需求：

int _currentIndex = 0;

Swiper(
  onIndexChanged: (int swiperIndex) {
    // 将swiper默认索引转换为反向索引：向下滑动时索引从原列表末尾向开头递减
    _currentIndex = reelDataList!.length - 1 - swiperIndex;
    // 调整加载触发条件：当反向索引到原列表第一项时触发加载
    if (_currentIndex == 0) {
      fetchReelDataList();
      _updateSwipingSpeed();
    }
  },
  scrollDirection: Axis.vertical,
  itemCount: reelDataList!.length,
  // 初始swiper索引设为0，对应反向索引的原列表最后一项（若要初始显示原列表第0项，设为reelDataList!.length -1）
  index: 0,
  loop: false,
  itemBuilder: (context, swiperIndex) {
    // 用转换后的索引获取原列表数据
    final targetData = reelDataList![reelDataList!.length - 1 - swiperIndex];
    return YourCardWidget(data: targetData); // 替换为你的卡片组件
  },
)

方案2：反转数据源（逻辑更直观） #

先将数据源反转，让swiper按默认逻辑滚动时，正好对应原列表的倒序索引：

// 提前反转数据源
final reversedReels = reelDataList!.reversed.toList();
int _currentIndex = 0;

Swiper(
  onIndexChanged: (int index) {
    _currentIndex = reversedReels.length - 1 - index; // 转换回原列表索引
    // 加载触发条件：当滚动到反转列表的最后一项（原列表第一项）时触发
    if (index == reversedReels.length - 1) {
      fetchReelDataList();
      _updateSwipingSpeed();
    }
  },
  scrollDirection: Axis.vertical,
  itemCount: reversedReels.length,
  index: 0, // 初始显示反转列表第一项（原列表最后一项），若要初始显示原列表第0项，设为reversedReels.length -1
  loop: false,
  itemBuilder: (context, index) {
    return YourCardWidget(data: reversedReels[index]);
  },
)

注意事项 #

• 你之前尝试的axisDirection参数是控制滚动轴的方向，并非索引顺序，所以无法实现需求；
• 根据初始显示需求调整index参数：若要一开始显示原列表第0项，需将swiper的初始索引设为数据源长度-1（方案1）或反转列表的长度-1（方案2）。

内容的提问来源于stack exchange，提问作者Rohit surage