优秀的编程知识分享平台

网站首页 > 技术文章 正文

Flutter CupertinoDatePicker 时间选择器的使用

nanyue 2024-07-26 15:46:41 技术文章 6 ℃


前言

Flutter默认使用的安卓时间选择器不好看,其他一些插件要么用的人太少,要么好几年没更新了。比如flutter_datetime_picker,是我喜欢的样式,但是两年没更新了,而且一直报错Error: 'DatePickerTheme' is imported from both,根本用不了。

以下介绍一下Flutter下的CupertinoDatePicker的详细使用方法。

导入

import 'package:flutter/cupertino.dart';

页面添加CupertinoDatePicker

SizedBox(
	height: 200, //放在SizedBox里面可以限制高度
	child: CupertinoDatePicker(
    mode: CupertinoDatePickerMode.date, //设置只有日期的模式
    initialDateTime: DateTime.now(), //初始时间
    //下面的时间限制必须要有,不然会报错“_CupertinoDatePickerDateTimeState is only meant for dateAndTime mode or time mode”
    maximumYear: 2025,
    minimumYear: 2024,
    minimumDate:
      DateTime.now().add(const Duration(days: -1)), //可选择的最小日期
    maximumDate: DateTime.now().add(const Duration(days: 300)),
    onDateTimeChanged: (date) { //date就是每次选择的日期
      print(date);
    },
	),
),

国际化

在pubspec.yaml里加上flutter_localizations或者intl,只用一个就可以了

dependencies:
  flutter:
    sdk: flutter
  #国际化
  flutter_localizations:
    sdk: flutter
  #或者使用intl
  intl: ^0.17.0

MaterialApp下面添加以下内容:

MaterialApp(
  locale: Locale('zh', 'CH'), //默认是中文
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
   ],
   supportedLocales: [
     const Locale('zh', 'CH'), //支持列表,中文
     const Locale('en', 'US'), //支持列表,英文
   ],
 ......

另外一个CupertinoTimePicker的例子

ElevatedButton(
  onPressed: () async {
  showModalBottomSheet(
    context: context,
    builder: (context) {
    return CupertinoTimerPicker(
      mode: CupertinoTimerPickerMode.hms, //模式可以值选择时和分,或者加秒
      minuteInterval: 1, //最小的分钟间隔
      //设置默认的时间,路由自己设置或者是可以设置为当前数据的时分秒
      initialTimerDuration:
      Duration(hours: 2, minutes: 10, seconds: 54),
      onTimerDurationChanged: (stime) {
        print("$stime");
        setState(() {
                 selectTimeStr2 = "$stime";
                 });
  	},);
	});
},
  child: Text("$timeM2$selectTimeStr2"))
最近发表
标签列表