flutter如何实现picker选择器

在Flutter中如何实现一个类似iOS或Android原生的Picker选择器？官方提供的组件似乎有限，有没有推荐的第三方库或者自定义实现方案？希望能支持单列、多列选择以及联动效果，最好能自定义样式和交互行为。

2 回复

Flutter 中实现选择器可使用 showModalBottomSheet 配合 CupertinoPicker（iOS 风格）或 ListWheelScrollView（自定义样式）。也可使用第三方库如 flutter_picker 简化开发。

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


在Flutter中实现选择器（Picker）主要有以下几种方式：

1. 使用内置的 showModalBottomSheet + ListView

void showCustomPicker(BuildContext context) {
  List<String> items = ['选项1', '选项2', '选项3', '选项4', '选项5'];
  int selectedIndex = 0;
  
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 300,
        child: Column(
          children: [
            // 标题栏
            Container(
              padding: EdgeInsets.all(16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  TextButton(
                    onPressed: () => Navigator.pop(context),
                    child: Text('取消'),
                  ),
                  Text('请选择'),
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context, selectedIndex);
                    },
                    child: Text('确定'),
                  ),
                ],
              ),
            ),
            // 选择列表
            Expanded(
              child: ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(items[index]),
                    trailing: selectedIndex == index 
                      ? Icon(Icons.check, color: Colors.blue)
                      : null,
                    onTap: () {
                      selectedIndex = index;
                      Navigator.pop(context, selectedIndex);
                    },
                  );
                },
              ),
            ),
          ],
        ),
      );
    },
  ).then((value) {
    if (value != null) {
      print('选择了: ${items[value]}');
    }
  });
}

2. 使用第三方包 flutter_picker

首先添加依赖：

dependencies:
  flutter_picker: ^2.1.13

使用示例：

import 'package:flutter_picker/flutter_picker.dart';

void showFlutterPicker(BuildContext context) {
  Picker(
    adapter: PickerDataAdapter<String>(pickerdata: [
      ['苹果', '香蕉', '橙子', '西瓜', '葡萄']
    ]),
    title: Text('选择水果'),
    selectedTextStyle: TextStyle(color: Colors.blue),
    onConfirm: (Picker picker, List<int> value) {
      print('选择了: ${picker.getSelectedValues()}');
    },
  ).showModal(context);
}

3. 使用第三方包 cupertino_picker（iOS风格）

import 'package:flutter/cupertino.dart';

void showCupertinoPicker(BuildContext context) {
  List<String> items = ['选项1', '选项2', '选项3', '选项4', '选项5'];
  
  showCupertinoModalPopup(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 200,
        child: CupertinoPicker(
          itemExtent: 32,
          onSelectedItemChanged: (int index) {
            print('选择了: ${items[index]}');
          },
          children: items.map((item) => Text(item)).toList(),
        ),
      );
    },
  );
}

4. 日期时间选择器

Flutter内置了日期时间选择器：

// 日期选择器
Future<void> showDatePickerExample(BuildContext context) async {
  final DateTime? picked = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2020),
    lastDate: DateTime(2025),
  );
  if (picked != null) {
    print('选择的日期: $picked');
  }
}

// 时间选择器
Future<void> showTimePickerExample(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  );
  if (picked != null) {
    print('选择的时间: $picked');
  }
}

推荐方案

  • 简单选择：使用 showModalBottomSheet + ListView
  • 多级联动：使用 flutter_picker 包
  • iOS风格：使用 CupertinoPicker
  • 日期时间：使用内置的日期时间选择器

选择哪种方式取决于你的具体需求和设计风格要求。

回到顶部