zoukankan      html  css  js  c++  java
  • flutter DateTime日期&时间选择器

    import 'package:flutter/material.dart';
    import 'package:intl/intl.dart';
    import 'dart:async';
    
    class DateTimeDemo extends StatefulWidget {
      @override
      _DateTimeDemoState createState() => _DateTimeDemoState();
    }
    
    class _DateTimeDemoState extends State<DateTimeDemo> {
      DateTime selectedDate = DateTime.now();
      TimeOfDay selectedTime = TimeOfDay(hour: 9, minute: 30);
      
      Future<void> _selectDate() async {
        final DateTime date = await showDatePicker(
          context: context,
          initialDate: selectedDate,
          firstDate: DateTime(1900),
          lastDate: DateTime(2100),
        );
    
        if (date == null) return;
    
        setState(() {
          selectedDate = date;
        });
      }
    
      Future<void> _selectTime() async {
        final TimeOfDay time = await showTimePicker(
          context: context,
          initialTime: selectedTime,
        );
    
        if (time == null) return;
    
        setState(() {
          selectedTime = time;
        });
      } 
      
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('DateTimeDemo'),
            elevation: 0.0,
          ),
          body: Container(
            padding: EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    InkWell(
                      onTap: _selectDate,
                      child: Row(
                        children: <Widget>[
                          Text(DateFormat.yMMMMd().format(selectedDate)),
                          Icon(Icons.arrow_drop_down),
                        ],
                      ),
                    ),
                    InkWell(
                      onTap: _selectTime,
                      child: Row(
                        children: <Widget>[
                          Text(selectedTime.format(context)),
                          Icon(Icons.arrow_drop_down),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          )
        );
      }
    }
     pubspec.yaml中添加 intl_translation: ^0.17.2

    文档:https://api.flutter.dev/flutter/material/showDatePicker.html

    效果:

  • 相关阅读:
    vue路由篇(动态路由、路由嵌套)----动态路由下再嵌套子路由
    文件、I/O重定向、文本
    Linux基础命令
    Chrome开发者工具(DevTools)使用技巧
    Grid网格布局知识点整理
    Javascript常见数组、字符串API整理
    css 实现瀑布流布局效果
    实时校验输入框内容
    app里遇见的小问题总结
    修复bug: iOS特性会滚动会引起白屏 ,使用 will-change: transform;
  • 原文地址:https://www.cnblogs.com/loaderman/p/11344990.html
Copyright © 2011-2022 走看看