flutter如何实现iOS风格的滚动时间选择器

在Flutter中如何实现类似iOS风格的滚动时间选择器？官方提供的CupertinoDatePicker控件虽然可以显示日期和时间，但样式和交互效果与iOS原生的时间选择器仍有差异。想请教大家有没有成熟的第三方插件或自定义实现方案，能够完美还原iOS那种流畅的滚动选择和分段式时间显示效果？最好能支持12/24小时制切换，并提供回调事件处理。

2 回复

使用flutter_cupertino_date_picker包，可快速实现iOS风格的时间选择器。安装后导入包，使用CupertinoDatePicker组件，设置模式为dateAndTime即可。

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


在Flutter中实现iOS风格的滚动时间选择器，可以使用cupertino_date_picker或Flutter内置的Cupertino组件。以下是两种实现方法：

方法一：使用cupertino_date_picker包（推荐）

  1. 添加依赖：在pubspec.yaml中添加：

    dependencies:
  cupertino_date_picker: ^1.0.12

  2. 基本使用：

    import 'package:cupertino_date_picker/cupertino_date_picker.dart';

CupertinoDatePicker(
  mode: CupertinoDatePickerMode.time, // 时间模式
  onDateTimeChanged: (DateTime dateTime) {
    print("选择的时间: ${dateTime.hour}:${dateTime.minute}");
  },
  initialDateTime: DateTime.now(),
);

方法二：使用Flutter内置Cupertino组件

import 'package:flutter/cupertino.dart';

CupertinoDatePicker(
  mode: CupertinoDatePickerMode.time,
  onDateTimeChanged: (DateTime newTime) {
    print("选择的时间: $newTime");
  },
  initialDateTime: DateTime.now(),
);

自定义样式（可选）：

  • 设置最小/最大时间：使用minimumDate和maximumDate
  • 24小时制：添加use24hFormat: true
  • 分钟间隔：设置minuteInterval属性

注意事项：

  • Cupertino组件需要导入cupertino.dart
  • 确保在Cupertino风格的页面中使用以保持UI一致性
  • 可结合showCupertinoModalPopup实现底部弹窗形式

这两种方法都能实现平滑滚动的iOS风格时间选择器，第一种方式提供了更多自定义选项。

回到顶部