Flutter如何实现日期年月份选择器

在Flutter中，如何实现一个日期选择器，可以单独选择年、月或年月组合？目前使用showDatePicker只能选择完整日期，有没有支持更灵活选择的插件或自定义方案？最好能提供代码示例或推荐成熟的第三方库。

2 回复

Flutter中可使用showDatePicker实现日期选择器，支持年、月、日选择。如需自定义年月份选择器，可使用showModalBottomSheet结合CupertinoDatePicker或第三方库如flutter_cupertino_date_picker实现。

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


在Flutter中实现日期年月份选择器，主要有以下几种方式：

1. 使用官方 showDatePicker

这是最简单的方式，可以快速实现日期选择功能：

Future<void> _selectDate(BuildContext context) async {
  final DateTime? picked = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2100),
    initialDatePickerMode: DatePickerMode.year, // 从年份开始选择
  );
  
  if (picked != null) {
    // 处理选择的日期
    print('选择的日期: $picked');
  }
}

2. 自定义年份月份选择器

如果需要更灵活的控制，可以自定义组件：

class YearMonthPicker extends StatefulWidget {
  @override
  _YearMonthPickerState createState() => _YearMonthPickerState();
}

class _YearMonthPickerState extends State<YearMonthPicker> {
  int _selectedYear = DateTime.now().year;
  int _selectedMonth = DateTime.now().month;
  
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('选择年月'),
      content: Container(
        height: 200,
        child: Row(
          children: [
            // 年份选择
            Expanded(
              child: ListWheelScrollView(
                itemExtent: 50,
                children: List.generate(50, (index) {
                  int year = 2000 + index;
                  return Center(
                    child: Text(
                      '$year年',
                      style: TextStyle(
                        fontSize: 18,
                        color: year == _selectedYear ? Colors.blue : Colors.black,
                      ),
                    ),
                  );
                }),
                onSelectedItemChanged: (index) {
                  setState(() {
                    _selectedYear = 2000 + index;
                  });
                },
              ),
            ),
            // 月份选择
            Expanded(
              child: ListWheelScrollView(
                itemExtent: 50,
                children: List.generate(12, (index) {
                  int month = index + 1;
                  return Center(
                    child: Text(
                      '$month月',
                      style: TextStyle(
                        fontSize: 18,
                        color: month == _selectedMonth ? Colors.blue : Colors.black,
                      ),
                    ),
                  );
                }),
                onSelectedItemChanged: (index) {
                  setState(() {
                    _selectedMonth = index + 1;
                  });
                },
              ),
            ),
          ],
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: Text('取消'),
        ),
        TextButton(
          onPressed: () {
            Navigator.pop(context, DateTime(_selectedYear, _selectedMonth));
          },
          child: Text('确定'),
        ),
      ],
    );
  }
}

// 使用方式
Future<void> showYearMonthPicker(BuildContext context) async {
  final DateTime? result = await showDialog(
    context: context,
    builder: (context) => YearMonthPicker(),
  );
  
  if (result != null) {
    print('选择的年月: ${result.year}年${result.month}月');
  }
}

3. 使用第三方库

推荐使用 flutter_cupertino_date_picker 或 syncfusion_flutter_datepicker：

dependencies:
  syncfusion_flutter_datepicker: ^20.4.48

SfDateRangePicker(
  view: DateRangePickerView.year,
  selectionMode: DateRangePickerSelectionMode.single,
  onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
    // 处理选择
  },
)

总结

  • 简单需求：使用 showDatePicker
  • 自定义需求：自己实现选择器组件
  • 复杂需求：使用第三方库

选择哪种方式取决于你的具体需求，官方组件最稳定，自定义组件最灵活，第三方库功能最丰富。

回到顶部