flutter如何实现滚动选择器

在Flutter中，如何实现一个类似iOS或Android原生的滚动选择器？需要支持自定义样式和选中回调功能。

2 回复

Flutter中可使用CupertinoPicker（iOS风格）或flutter_picker等第三方库实现滚动选择器。通过设置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（自定义风格）

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

3. 使用三方库 flutter_picker

在pubspec.yaml中添加：

dependencies:
  flutter_picker: ^2.1.7

使用示例：

Picker(
  adapter: PickerDataAdapter<String>(
    pickerdata: ['选项1', '选项2', '选项3'],
  ),
  title: Text('请选择'),
  onConfirm: (Picker picker, List value) {
    print(value.toString());
    print(picker.getSelectedValues());
  },
).showModal(context);

4. 日期时间选择器

// iOS风格
CupertinoDatePicker(
  mode: CupertinoDatePickerMode.date,
  onDateTimeChanged: (DateTime newDateTime) {
    print(newDateTime);
  },
)

// Material风格
showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2020),
  lastDate: DateTime(2030),
)

选择哪种方式取决于你的设计需求：CupertinoPicker适合iOS风格，ListWheelScrollView可高度自定义，三方库提供更多功能。

回到顶部