Flutter 时间选择器

引入flutter_datetime_picker插件pubspec.yaml文件中引入:dependencies: flutter_datetime_picker: 1.2.6作用及使用选择时间组件参考网址:flutter_datetime_picker 使用方式: 选择日期 import 'package:flutter_datetime_pi...
摘要由CSDN通过智能技术生成

引入flutter_datetime_picker插件

pubspec.yaml文件中引入:

dependencies:
  flutter_datetime_picker: 1.2.6

作用及使用

选择时间组件

  1. 参考网址:flutter_datetime_picker
  2. 使用方式:

    • 选择日期

      import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
      
      FlatButton(
        onPressed: () {
          DatePicker.showDatePicker(context,
            // 是否展示顶部操作按钮
            showTitleActions: true,
            // 最小时间
            minTime: DateTime(2018, 3, 5),
            // 最大时间
            maxTime: DateTime(2099, 6, 7),
            // change事件
            onChanged: (date) {
              print('change $date');
            },
            // 确定事件
            onConfirm: (date) {
              print('confirm $date');
            },
            // 当前时间
            currentTime: DateTime.now(),
            // 语言
            locale: LocaleType.zh);
      
  • 2
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
以下是一个基本的Flutter时间选择器,使用`showTimePicker()`函数显示一个对话框来让用户选择时间: ```dart import 'package:flutter/material.dart'; class TimePickerWidget extends StatefulWidget { @override _TimePickerWidgetState createState() => _TimePickerWidgetState(); } class _TimePickerWidgetState extends State<TimePickerWidget> { TimeOfDay _selectedTime; Future<void> _selectTime(BuildContext context) async { final TimeOfDay time = await showTimePicker( context: context, initialTime: _selectedTime ?? TimeOfDay.now(), ); if (time != null) { setState(() { _selectedTime = time; }); } } @override Widget build(BuildContext context) { return InkWell( onTap: () => _selectTime(context), child: InputDecorator( decoration: InputDecoration( labelText: 'Select Time', border: OutlineInputBorder(), ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text( _selectedTime != null ? _selectedTime.format(context) : '', style: TextStyle(fontSize: 16.0), ), Icon(Icons.arrow_drop_down), ], ), ), ); } } ``` 在上面的代码中,我们创建了一个名为`TimePickerWidget`的小部件,它继承自`StatefulWidget`,因为它需要保持用户选择时间。 `_selectedTime`变量用于存储所选的时间。 `_selectTime()`方法显示时间选择器对话框,并在用户完成选择后更新所选的时间。在`build()`方法中,我们使用`InputDecorator`和`InkWell`小部件来显示时间选择器的外观,并使用`Text`和`Icon`小部件显示所选的时间
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值