时间戳

首页 > 解决方案 > 如何使用 timepicker 小部件显示使用 Flutter 的开始和结束时间

flutter - 如何使用 timepicker 小部件显示使用 Flutter 的开始和结束时间

问题描述

我正在创建一个页面来显示开始时间和结束时间，但是当我找不到更新各个字段中时间的方法时。我只使用一个函数来构建一个时间选择器并显示时间。

这是我的时间选择器功能

Future<Null> selectedTime(BuildContext context, bool ifPickedTime) async{
_pickedTime = await showTimePicker(
    context: context,
    initialTime: _currentTime);
if (_pickedTime != null){
  setState(() {
    _currentTime = _pickedTime;
    print("The picked time is: $_pickedTime");
  });
 }
}

这是我的小部件生成器

Widget _buildTimePick(String title, bool ifPickedTime){
return Row(
  children: [
    Container(
      width: 80,
      child: Text(
        title,
        style: AppStyles.textTitle,
      ),
    ),
    Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
      decoration: BoxDecoration(
        border: Border.all(color: MyColors.borderColor),
        borderRadius: BorderRadius.circular(20),
      ),
      child: GestureDetector(
        child: Text(
          "${_currentTime.format(context)}",
          style: AppStyles.textBody,
        ),
        onTap: () {
          selectedTime(context, ifPickedTime);
        },
      ),
    ),
  ],
);
}

这是输出

标签： flutterdartwidgettimepicker

解决方案

您可以使用 TextEditingController 更新 TextField。放入，setState以便它可以在您选择日期时更新 TextField。经验：

final txtController = TextEditingController();    
final DateTime? picked = await showDatePicker(
            context: context,
            initialDate: DateTime.now(),
            firstDate: DateTime(2000),
            lastDate: DateTime(2025));
        if(picked != null && picked != now) {
          setState(() {
            txtController.text = DateFormat('dd-MM-yyyy').format(picked); //I'm using intl package, you can use toString()
          });
        }

推荐阅读