flutter如何实现滚轮选择器

在Flutter中如何实现类似iOS的滚轮选择器效果？目前尝试了CupertinoPicker组件，但无法自定义样式和联动效果。请问有没有更灵活的第三方库推荐？或者如何基于ListView实现支持惯性滚动、snap效果的滚轮选择器？需要支持单列和多列联动场景。

2 回复

Flutter中实现滚轮选择器可使用CupertinoPicker（iOS风格）或ListWheelScrollView（Material风格）。

  • CupertinoPicker：提供类似iOS的滚轮效果。
  • ListWheelScrollView：支持自定义样式和交互。
    两者均需设置itemExtent和子项列表，通过onSelectedItemChanged监听选择变化。

更多关于flutter如何实现滚轮选择器的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过以下方式实现滚轮选择器：

1. 使用 CupertinoPicker（iOS风格）

CupertinoPicker(
  itemExtent: 40,
  onSelectedItemChanged: (int index) {
    print('选择了: $index');
  },
  children: List<Widget>.generate(10, (int index) {
    return Center(
      child: Text('选项 $index'),
    );
  }),
)

2. 使用 ListWheelScrollView（Material风格）

ListWheelScrollView(
  itemExtent: 50,
  diameterRatio: 1.5,
  perspective: 0.005,
  onSelectedItemChanged: (int index) {
    print('选择了: $index');
  },
  children: List<Widget>.generate(20, (int index) {
    return Container(
      height: 50,
      alignment: Alignment.center,
      child: Text('项目 $index'),
    );
  }),
)

3. 完整示例代码

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

class WheelPickerDemo extends StatefulWidget {
  @override
  _WheelPickerDemoState createState() => _WheelPickerDemoState();
}

class _WheelPickerDemoState extends State<WheelPickerDemo> {
  int _selectedIndex = 0;
  final List<String> _items = ['苹果', '香蕉', '橙子', '葡萄', '西瓜'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('滚轮选择器')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('当前选择: ${_items[_selectedIndex]}'),
            SizedBox(height: 20),
            Container(
              height: 200,
              child: CupertinoPicker(
                itemExtent: 40,
                onSelectedItemChanged: (int index) {
                  setState(() {
                    _selectedIndex = index;
                  });
                },
                children: _items.map((item) {
                  return Center(child: Text(item));
                }).toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

主要参数说明：

  • itemExtent: 每个选项的高度
  • diameterRatio: 滚轮的直径比例（仅ListWheelScrollView）
  • perspective: 透视效果（仅ListWheelScrollView）
  • onSelectedItemChanged: 选择变化回调

选择哪种组件取决于你想要的平台风格：CupertinoPicker提供iOS风格，ListWheelScrollView提供更灵活的Material风格。

回到顶部