如何修改Flutter的CupertinoPicker使其停止循环滚动？

当然可以做到！CupertinoPicker默认的循环滚动是它的内置特性，但我们可以通过两种方式修改它的行为，让滚动在数值范围的首尾（比如1和7）停止，不再循环。下面是两种实用的方案：

方案一：自定义滚动物理（ScrollPhysics） #

这是最优雅的方式，通过替换CupertinoPicker默认的滚动物理类，直接禁用循环逻辑。原生的CupertinoPickerScrollPhysics支持循环滚动，我们可以继承它并重写边界判断方法：

class NonLoopingCupertinoPickerPhysics extends CupertinoPickerScrollPhysics {
  const NonLoopingCupertinoPickerPhysics({ScrollPhysics? parent}) : super(parent: parent);

  @override
  NonLoopingCupertinoPickerPhysics applyTo(ScrollPhysics? ancestor) {
    return NonLoopingCupertinoPickerPhysics(parent: buildParent(ancestor));
  }

  @override
  double applyBoundaryConditions(ScrollMetrics position, double value) {
    // 当滚动到最小或最大偏移量时，阻止继续滚动
    if (value < position.minScrollExtent) {
      return value - position.minScrollExtent;
    }
    if (value > position.maxScrollExtent) {
      return value - position.maxScrollExtent;
    }
    return 0.0;
  }
}

然后在使用CupertinoPicker时，把physics参数设置为我们自定义的类即可：

CupertinoPicker(
  physics: const NonLoopingCupertinoPickerPhysics(),
  itemExtent: 50.0, // 每个选项的高度
  onSelectedItemChanged: (index) {
    // 这里index是0-6，对应数值1-7，可以转换为index + 1
    print('选中了：${index + 1}');
  },
  children: List.generate(7, (index) {
    return Center(child: Text('${index + 1}'));
  }),
)

这样滚动到1（索引0）或7（索引6）时，就会像普通滚动组件一样停住，不会再循环到另一端。

方案二：使用FixedExtentScrollController监听并修正滚动位置 #

如果你不想自定义物理类，也可以通过控制器监听滚动事件，当滚动超出边界时强制跳转回首尾位置：

首先初始化控制器：

final FixedExtentScrollController _pickerController = FixedExtentScrollController();

然后在initState中添加滚动监听：

@override
void initState() {
  super.initState();
  _pickerController.addListener(() {
    final currentIndex = _pickerController.selectedItem;
    // 假设我们的选项是1-7，对应索引0-6
    if (currentIndex < 0) {
      _pickerController.jumpToItem(0);
    } else if (currentIndex > 6) {
      _pickerController.jumpToItem(6);
    }
  });
}

最后把控制器绑定到CupertinoPicker上：

CupertinoPicker(
  scrollController: _pickerController,
  itemExtent: 50.0,
  onSelectedItemChanged: (index) {
    print('选中了：${index + 1}');
  },
  children: List.generate(7, (index) {
    return Center(child: Text('${index + 1}'));
  }),
)

这种方式会在用户滚动超出边界时，立刻把Picker拉回首尾位置，体验上会有一点回弹感，但实现起来更简单。

两种方案都能解决你的问题，推荐第一种，因为它的滚动体验更自然，和原生非循环组件的表现一致。

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