Flutter如何实现picker选择器

在Flutter中如何实现一个picker选择器？目前需要让用户从多个选项中选择一个值，类似于iOS的UIPickerView或Android的Spinner。请问有哪些推荐的实现方式？是使用内置组件还是需要依赖第三方库？能否提供一个简单的代码示例？

2 回复

Flutter中实现选择器可使用showModalBottomSheet搭配CupertinoPicker（iOS风格）或ListWheelScrollView（自定义滚动）。也可用第三方库如flutter_picker简化实现。通过onSelectedItemChanged回调获取选中值。

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


在Flutter中，可以通过以下几种方式实现选择器（picker）：

1. 内置选择器组件

CupertinoPicker（iOS风格）

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

DropdownButton（下拉选择）

String selectedValue = '选项1';

DropdownButton<String>(
  value: selectedValue,
  onChanged: (String? newValue) {
    setState(() {
      selectedValue = newValue!;
    });
  },
  items: <String>['选项1', '选项2', '选项3']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
)

2. 第三方包推荐

flutter_picker

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);

date_time_picker（日期时间选择）

DateTimePickerFormField(
  format: DateFormat('yyyy-MM-dd'),
  onChanged: (dt) => print(dt),
  decoration: InputDecoration(labelText: '选择日期'),
)

3. 自定义选择器

class CustomPicker extends StatefulWidget {
  @override
  _CustomPickerState createState() => _CustomPickerState();
}

class _CustomPickerState extends State<CustomPicker> {
  int selectedIndex = 0;
  
  @override
  Widget build(BuildContext context) {
    return ListWheelScrollView(
      itemExtent: 50,
      perspective: 0.005,
      diameterRatio: 1.2,
      onSelectedItemChanged: (index) {
        setState(() {
          selectedIndex = index;
        });
      },
      children: List.generate(10, (index) {
        return Container(
          alignment: Alignment.center,
          child: Text(
            '选项 $index',
            style: TextStyle(
              fontSize: 20,
              color: selectedIndex == index ? Colors.blue : Colors.grey,
            ),
          ),
        );
      }),
    );
  }
}

选择合适的方式取决于你的具体需求：iOS风格用CupertinoPicker，简单下拉用DropdownButton，复杂选择用第三方包，完全自定义用ListWheelScrollView。

回到顶部