ListWheelScrollView：如何设置指定索引位置的滚动限制块？

要实现ListWheelScrollView滚动到指定索引后无法继续向下滚动（仅停留在允许的索引位置），可以通过以下两种方案实现：

方案一：FixedExtentScrollController + 滚动监听 #

利用FixedExtentScrollController监听选中索引，当超过限制值时强制回滚到目标索引：

1. 定义控制器和限制参数：

final FixedExtentScrollController _scrollController = FixedExtentScrollController();
final int _maxAllowedIndex = 5; // 设置你需要限制的最大停留索引

2. 在初始化时添加滚动监听：

@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    if (_scrollController.selectedItemIndex > _maxAllowedIndex) {
      // 超过限制时自动跳回最大允许索引
      _scrollController.jumpToItem(_maxAllowedIndex);
    }
  });
}

3. 配置ListWheelScrollView：

ListWheelScrollView.useDelegate(
  controller: _scrollController,
  itemExtent: 60, // 每个列表项的高度
  physics: const FixedExtentScrollPhysics(),
  childDelegate: ListWheelChildBuilderDelegate(
    builder: (context, index) {
      return Container(
        alignment: Alignment.center,
        child: Text('列表项 $index'),
      );
    },
    childCount: 10, // 实际列表长度可以大于限制索引
  ),
)

这种方案逻辑简单，当用户滚动超过限制索引时会立刻跳回目标位置，适合需要严格限制停留位置的场景。

方案二：自定义ScrollPhysics实现平滑限制 #

如果想要更自然的回弹效果，可以自定义FixedExtentScrollPhysics，重写滚动行为阻止超过限制索引的滚动：

1. 自定义物理类：

class LimitedFixedExtentScrollPhysics extends FixedExtentScrollPhysics {
  final int maxIndex;
  final double itemExtent;

  LimitedFixedExtentScrollPhysics({
    required this.maxIndex,
    required this.itemExtent,
    ScrollPhysics? parent,
  }) : super(parent: parent);

  @override
  LimitedFixedExtentScrollPhysics applyTo(ScrollPhysics? ancestor) {
    return LimitedFixedExtentScrollPhysics(
      maxIndex: maxIndex,
      itemExtent: itemExtent,
      parent: buildParent(ancestor),
    );
  }

  @override
  Simulation? createBallisticSimulation(ScrollMetrics position, double velocity) {
    // 计算最大允许的滚动偏移量
    final double maxOffset = maxIndex * itemExtent;
    // 当滚动到限制位置且仍有向下滚动的速度时，创建回弹模拟
    if (position.pixels > maxOffset && velocity > 0) {
      return ScrollSpringSimulation(spring, position.pixels, maxOffset, 0);
    }
    return super.createBallisticSimulation(position, velocity);
  }
}

2. 在ListWheelScrollView中使用自定义物理：

ListWheelScrollView.useDelegate(
  itemExtent: 60,
  physics: LimitedFixedExtentScrollPhysics(
    maxIndex: 5,
    itemExtent: 60,
  ),
  childDelegate: ListWheelChildBuilderDelegate(
    builder: (context, index) {
      return Container(
        alignment: Alignment.center,
        child: Text('列表项 $index'),
      );
    },
    childCount: 10,
  ),
)

这个方案会在用户滚动到限制索引时产生自然的回弹效果，体验更流畅，适合追求交互质感的场景。

内容的提问来源于stack exchange，提问作者Flutter kyoto