Flutter学习之Calendar、Time自带组件和第三方组件学习

163 阅读1分钟

第三方日期、时间选择组件使用的是flutter_datetime_picker

class _SSLCalendarState extends State<SSLCalendar> {
  var _now = DateTime.now();
  var _time = TimeOfDay(hour: 12, minute: 20);
  _showDatePicker() async{

    var result = await showDatePicker(
        context: context,
        initialDate: _now,
        firstDate: DateTime(1980),
        lastDate: DateTime(2222)
    );

    setState(() {
      if (result != null){
        _now = result;
      }
    });
    print(result);

  }

  _showTimePicker() async{
    var result = await showTimePicker(
        context: context,
        initialTime: _time
    );
    print(result);
    setState(() {
      if (result != null){
        _time = result;
      }
    });


  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('bar'),
      ),
      body:Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            children: [
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(formatDate(_now, [yyyy, '-', mm, '-', dd])),
                  ],
                ),
                onTap: _showDatePicker,
              ),
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(_time.format(context)),
                  ],
                ),
                onTap: _showTimePicker,
              ),

            ],
          ),
          InkWell(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('第三方日期组件'),
                SizedBox(width: 10,),
                Text(formatDate(_now, [yyyy, '-', mm, '-', dd])),
              ],
            ),
            onTap: (){
              DatePicker.showDatePicker(context,
                  showTitleActions: true,
                  minTime: DateTime(2018, 3, 5),
                  maxTime: DateTime(2023, 6, 7), onChanged: (date) {
                    print('change $date');
                  }, onConfirm: (date) {
                    print('confirm $date');
                    setState(() {
                      _now = date;
                    });
                  }, currentTime: _now, locale: LocaleType.zh);
            },
          ),
          InkWell(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(_time.format(context)),
              ],
            ),
            onTap: (){
              DatePicker.showDateTimePicker(context,
                  showTitleActions: true,
                  minTime: DateTime(2018, 3, 5),
                  maxTime: DateTime(2023, 6, 7), onChanged: (date) {
                    print('change $date');
                  }, onConfirm: (date) {
                    print('confirm $date');
                    setState(() {
                      _time = date as TimeOfDay;
                    });
                  }, currentTime: DateTime.now(), locale: LocaleType.zh);
            },
          )
        ],
      ),
    );
  }
}