如何使用时间选择器小部件使用 Flutter 显示开始和结束时间

Question

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

这是我的时间选择器函数

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 Builder

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);
        },
      ),
    ),
  ],
);
}

Answer 1

您可以使用 TextEditingController 更新 TextField。放入 setState 以便它可以在您选择日期时更新 TextField。 Exp:

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()
          });
        }

Answer 2

根据提问，我感觉你想实现的是分别更新开始和结束时间。但是根据代码只有一个时间被更新，由两个开始和结束时间小部件共享，所以它显示相同的时间。

您可以创建 2 个变量，一个用于开始时间，一个用于结束时间。

TimeOfDay _startTime;
TimeOfDay _endTime;

然后通过传递要显示的时间使您的 _buildTimePick 函数更灵活一些。

Widget _buildTimePick(String title, bool ifPickedTime, TimeOfDay currentTime, Function(TimeOfDay) onTimePicked){
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,currentTime, onTimePicked);
        },
      ),
    ),
  ],
);
}

另外，selectedTime 函数应该更灵活，以便可以使用通过创建回调来选择开始和结束时间。

Future selectedTime(BuildContext context, bool ifPickedTime, TimeOfDay initialTime, Function(TimeOfDay) onTimePicked) async{
var _pickedTime = await showTimePicker(
    context: context,
    initialTime: initialTime);
if (_pickedTime != null){
  onTimePicked(_pickedTime);
 }
}

因此，最终代码可能类似于：

import 'package:flutter/material.dart';

void main() => runApp(MainApp());

class MainApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(),
      body: Home(),
    ));
  }
}

class Home extends StatefulWidget {
  @override
  State<Home> createState() => HomeState();
}

class HomeState extends State<Home> {
  TimeOfDay startTime = TimeOfDay.now();
  TimeOfDay endTime = TimeOfDay.now();

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        _buildTimePick("Start", true, startTime, (x) {
          setState(() {
            startTime = x;
            print("The picked time is: $x");
          });
        }),
        const SizedBox(height: 10),
        _buildTimePick("End", true, endTime, (x) {
          setState(() {
            endTime = x;
            print("The picked time is: $x");
          });
        }),
      ],
    );
  }

  Future selectedTime(BuildContext context, bool ifPickedTime,
      TimeOfDay initialTime, Function(TimeOfDay) onTimePicked) async {
    var _pickedTime =
        await showTimePicker(context: context, initialTime: initialTime);
    if (_pickedTime != null) {
      onTimePicked(_pickedTime);
    }
  }

  Widget _buildTimePick(String title, bool ifPickedTime, TimeOfDay currentTime,
      Function(TimeOfDay) onTimePicked) {
    return Row(
      children: [
        SizedBox(
          width: 80,
          child: Text(
            title,
          ),
        ),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
          decoration: BoxDecoration(
            border: Border.all(),
            borderRadius: BorderRadius.circular(20),
          ),
          child: GestureDetector(
            child: Text(
              currentTime.format(context),
            ),
            onTap: () {
              selectedTime(context, ifPickedTime, currentTime, onTimePicked);
            },
          ),
        ),
      ],
    );
  }
}

如何使用时间选择器小部件使用 Flutter 显示开始和结束时间

How to use timepicker widget to show start and end time using Flutter

flutter

dart

widget

timepicker