DatePicker 作为小部件 - Flutter

Question

我在创建日历小部件时遇到问题，我会在底部标记日期和时间。

如何将功能更改为小部件，以便在屏幕上显示整个日历？还有怎么把时间改成图中的时间？

非常感谢所有建议

 class ExampleCalendar extends StatefulWidget {
 @override
_ExampleCalendarState createState() => _ExampleCalendarState();

static Route route() {
return MaterialPageRoute<void>(builder: (_) => ExampleCalendar());
}
}

 class _ExampleCalendarState extends State<ExampleCalendar> {
 DateTime setDate = DateTime.now();

 @override
  Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       backgroundColor: Colors.transparent,
       leading: IconButton(
        icon: Icon(arrowBackIcon, color: Colors.black),
        onPressed: () => Navigator.of(context).pop(),
      ),
     ),
     body: _menuPage(context),
   );
   }

  Widget _menuPage(BuildContext context) {
    return SafeArea(
      child: Align(
        child: SingleChildScrollView(
         child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _calendar(context),
        ],
      ),
    ),
  ),
);
}



 Widget _calendar(BuildContext context) {
   return Container(
  width: double.infinity,
  height: 100,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Expanded(
        child: Container(
          color: Colors.lightBlueAccent,
          height: double.infinity,
          child: TextButton(
              child: Text(
                DateFormat.Hm().format(this.setDate),
                style: const TextStyle(
                    fontSize: 30.0,
                    color: Colors.black,
                    fontWeight: FontWeight.w500),
              ),
              onPressed: openTimePicker
              // SizedBox(width: 5)

              ),
        ), // color: Color.fromRGBO(7, 190, 200, 0.1),
        ),
      Expanded(
        child: Container(
          color: Color.fromRGBO(7, 190, 200, 0.1),
          height: double.infinity,
          child: TextButton(
              child: Text(
                DateFormat('dd.MM').format(this.setDate),
                style: TextStyle(
                    fontSize: 32.0,
                    color: Colors.black,
                    fontWeight: FontWeight.w500),
              ),
              onPressed: () {
                openDatePicker();
                // SizedBox(width: 1),
                Icon(
                  Icons.access_time,
                  size: 40,
                  color: Colors.lightBlueAccent,
                );
              }),
        ), // color: Color.fromRGBO(7, 190, 200, 0.1),
      ),
    ],
  ),
  );
 }

这里有两个我想变成小部件的功能，这样我就不必点击了

 Future<void> openTimePicker() async {
await showTimePicker(
        context: context,
        initialTime: TimeOfDay.now(),
        helpText: "Choose Time")
    .then((value) {
  DateTime newDate = DateTime(
      setDate.year,
      setDate.month,
      setDate.day,
      value != null ? value.hour : setDate.hour,
      value != null ? value.minute : setDate.minute);
  setState(() => setDate = newDate);
  print(newDate.hour);
  print(newDate.minute);
 });
}

显示日期选择器并更改当前选择的日期

 Future<void> openDatePicker() async {
await showDatePicker(
        context: context,
        initialDate: setDate,
        firstDate: DateTime.now(),
        lastDate: DateTime.now().add(Duration(days: 100000)))
    .then((value) {
  DateTime newDate = DateTime(
      value != null ? value.year : setDate.year,
      value != null ? value.month : setDate.month,
      value != null ? value.day : setDate.day,
      setDate.hour,
      setDate.minute);
  setState(() => setDate = newDate);
  print(setDate.day);
  print(setDate.month);
  print(setDate.year);
});
}
}

我希望它看起来像这样：

但目前是这样的：

Answer 1

您在单击按钮时调用了 showDatePicker() 和 showTimePicker()，并且您有 Text(DateFormat('dd.MM').format(this.setDate) 和 Text(DateFormat.Hm().format(this.setDate) 作为 textButtons 的值，所以这是预期的结果。

如果您希望您的小部件看起来像您想要的那样，对于日历，您可以使用 CalendarDatePicker（文档：https://api.flutter.dev/flutter/material/CalendarDatePicker-class.html）

对于时间选择器，您可以使用 flutter_time_picker_spinner (https://pub.dev/packages/flutter_time_picker_spinner) 或 pubdev 上的其他类似包。

DatePicker 作为小部件 - Flutter

DatePicker as a widget - Flutter

dart

flutter

flutter-dependencies

flutter-layout

flutter-animation