如何结合NotificationListener与CupertinoPicker获取滚动停止时的索引？

我之前也踩过这个坑，官方文档的提示方向是对的，但确实需要注意几个细节才能顺利实现。下面给你一步步拆解具体做法：

先回顾官方提示 #

若仅需在滚动停止时获取值，请使用NotificationListener监听ScrollEndNotification并读取其FixedExtentMetrics。

具体实现步骤 #

1. 用NotificationListener包裹CupertinoPicker #

直接把CupertinoPicker放到NotificationListener的child里，注意指定泛型为ScrollEndNotification，这样我们只会监听滚动停止的事件，避免不必要的回调。

2. 在onNotification中提取选中索引 #

当滚动停止时，ScrollEndNotification的metrics属性就是FixedExtentMetrics，里面的selectedItemIndex就是我们要的滚动停止后的选中项索引。

完整代码示例 #

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PickerScrollEndDemo extends StatefulWidget {
  const PickerScrollEndDemo({super.key});

  @override
  State<PickerScrollEndDemo> createState() => _PickerScrollEndDemoState();
}

class _PickerScrollEndDemoState extends State<PickerScrollEndDemo> {
  final List<String> pickerItems = ['苹果', '香蕉', '橙子', '葡萄', '西瓜'];
  int _currentSelectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('CupertinoPicker 滚动停止获取索引')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '滚动停止后选中：${pickerItems[_currentSelectedIndex]}（索引：$_currentSelectedIndex）',
              style: const TextStyle(fontSize: 18),
            ),
            const SizedBox(height: 30),
            // 固定Picker高度，避免占满屏幕
            SizedBox(
              height: 200,
              child: NotificationListener<ScrollEndNotification>(
                onNotification: (scrollEndNotification) {
                  // 将metrics强转为FixedExtentMetrics
                  final fixedMetrics = scrollEndNotification.metrics as FixedExtentMetrics;
                  setState(() {
                    _currentSelectedIndex = fixedMetrics.selectedItemIndex;
                  });
                  // 返回true表示已处理该通知，不再向上传递（可根据需求调整）
                  return true;
                },
                child: CupertinoPicker(
                  itemExtent: 50, // 每个选项的高度
                  // 初始选中项，和我们维护的索引保持一致
                  scrollController: FixedExtentScrollController(initialItem: _currentSelectedIndex),
                  // 如果你不需要滚动过程中的实时回调，可以直接删掉这个参数
                  onSelectedItemChanged: (index) {
                    // 这里是滚动时实时触发的，我们不需要的话可以留空或删除
                  },
                  children: pickerItems
                      .map((item) => Center(
                            child: Text(
                              item,
                              style: const TextStyle(fontSize: 16),
                            ),
                          ))
                      .toList(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键细节说明 #

• 为什么要强转FixedExtentMetrics？：因为CupertinoPicker默认使用FixedExtentScrollController，对应的滚动 metrics 就是这个类型，里面专门提供了selectedItemIndex属性，直接就能拿到选中索引。
• onNotification返回值的作用：返回true会阻止这个通知继续向上传递给父组件；如果你的页面还有其他滚动组件需要响应这个通知，可以返回false。
• 要不要保留onSelectedItemChanged？：如果完全不需要滚动过程中的实时更新，直接删掉这个参数就行，这样就只有滚动停止时才会更新索引，完全符合你的需求。

注意事项 #

确保你的CupertinoPicker没有手动指定其他类型的ScrollController，必须是FixedExtentScrollController（默认就是，所以一般不用特意设置，除非你需要初始选中项），否则强转的时候会报错。

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