日期选择器控件简单实现

lib/converts/alignment_convert.dart

@@ -48,7 +48,7 @@ class AlignmentConvert {
         case HorizontalLayout.Right:
           return MainAxisAlignment.end;
         case HorizontalLayout.Stretch:
-          return MainAxisAlignment.start;
+          return MainAxisAlignment.end;
       }
     }
   }

lib/pages/components/RDateTime.dart

@@ -17,15 +17,17 @@ class RDateTime extends StatefulWidget {
 
 class _RDateTimeState extends State<RDateTime> {
   final DateTimeElement dateTimeElement;
+  DateTime selectedDate = DateTime.now();
+
   _RDateTimeState(this.dateTimeElement);
 
   String _dateTime = '';
   double _fontSize = 15.0;
   double _width = 0;
-  TextStyle _style = TextStyle();
+  TextStyle _style = const TextStyle();
   Color _fontColor = Colors.black;
   Color _backgroundColor = const Color.fromARGB(255, 255, 255, 255);
-  EdgeInsets _margin = EdgeInsets.all(0);
+  EdgeInsets _margin = const EdgeInsets.all(0);
 
   @override
   initState() {
@@ -34,25 +36,7 @@ class _RDateTimeState extends State<RDateTime> {
     _dateTime = currentDateTime.toString().substring(0, 10);
     final format = dateTimeElement.dateTimeFormat;
     if (format != null) {
-      if (format == 'yyyy-MM-dd') {
-        _dateTime = DateToStringConverter.dateAndTimeToString(
-            timestamp, {"y-m": "-", "m-d": "-"});
-      } else if (format == 'yyyy年M月d日 HH:mm') {
-        _dateTime = DateToStringConverter.dateAndTimeToString(
-            timestamp, {"y-m": "年", "m-d": "月", "d-h": "日", "h-m": ":"});
-      } else if (format == 'yyyy-MM-dd HH:mm') {
-        _dateTime = DateToStringConverter.dateAndTimeToString(
-            timestamp, {"y-m": "-", "m-d": "-", "h-m": ":"});
-      } else if (format == "yyyy年M月d日") {
-        _dateTime = DateToStringConverter.dateAndTimeToString(
-            timestamp, {"y-m": "年", "m-d": "月", "d-h": "日"});
-      } else if (format == 'yyyy.MM.dd') {
-        _dateTime = DateToStringConverter.dateAndTimeToString(
-            timestamp, {"y-m": ".", "m-d": "."});
-      } else if (format == 'yyyy/MM/dd') {
-        _dateTime = DateToStringConverter.dateAndTimeToString(
-            timestamp, {"y-m": "/", "m-d": "/"});
-      }
+      _dateTimeConvert(format, timestamp);
     }
 
     _fontSize = dateTimeElement.fontSize ?? 15.0;
@@ -90,16 +74,81 @@ class _RDateTimeState extends State<RDateTime> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      margin: _margin,
-      alignment: AlignmentConvert.verticalLayoutConvert(
-          dateTimeElement.verticalAlignment!),
-      width: _width,
-      child: Text(
-        _dateTime,
-        style: _style,
-        textAlign: AlignmentConvert.horizontalAlignmentConvert(
-            dateTimeElement.horizontalAlignment),
-      ),
+        margin: _margin,
+        decoration: BoxDecoration(
+          border: Border.all(
+            width: 1,
+            color:
+                dateTimeElement.showEnabled! ? Colors.grey : Colors.transparent,
+          ),
+        ),
+        width: _width,
+        alignment: AlignmentConvert.verticalLayoutConvert(
+            dateTimeElement.verticalAlignment!),
+        child: Row(
+          mainAxisAlignment: AlignmentConvert.horizontalToMainConvert(
+              dateTimeElement.horizontalAlignment),
+          children: [
+            Container(
+              margin: _margin,
+              alignment: AlignmentConvert.verticalLayoutConvert(
+                  dateTimeElement.verticalAlignment!),
+              child: Text(
+                _dateTime,
+                style: _style,
+                textAlign: AlignmentConvert.horizontalAlignmentConvert(
+                    dateTimeElement.horizontalAlignment),
+              ),
+            ),
+            if (dateTimeElement.showEnabled!) ...[
+              const Expanded(child: SizedBox()),
+              GestureDetector(
+                onTap: () => _selectDate(context),
+                child: const Icon(
+                  Icons.date_range_outlined,
+                  size: 20,
+                ),
+              ),
+            ],
+          ],
+        ));
+  }
+
+  _selectDate(BuildContext context) async {
+    final DateTime? picked = await showDatePicker(
+      context: context,
+      initialDate: selectedDate, // Refer step 1
+      firstDate: DateTime(2000),
+      lastDate: DateTime(2025),
     );
+    if (picked != null && picked != selectedDate) {
+      final format = dateTimeElement.dateTimeFormat;
+      setState(() {
+        selectedDate = picked;
+        _dateTimeConvert(format!, selectedDate.millisecondsSinceEpoch);
+      });
+    }
+  }
+
+  void _dateTimeConvert(String format, int timestamp) {
+    if (format == 'yyyy-MM-dd') {
+      _dateTime = DateToStringConverter.dateAndTimeToString(
+          timestamp, {"y-m": "-", "m-d": "-"});
+    } else if (format == 'yyyy年M月d日 HH:mm') {
+      _dateTime = DateToStringConverter.dateAndTimeToString(
+          timestamp, {"y-m": "年", "m-d": "月", "d-h": "日", "h-m": ":"});
+    } else if (format == 'yyyy-MM-dd HH:mm') {
+      _dateTime = DateToStringConverter.dateAndTimeToString(
+          timestamp, {"y-m": "-", "m-d": "-", "h-m": ":"});
+    } else if (format == "yyyy年M月d日") {
+      _dateTime = DateToStringConverter.dateAndTimeToString(
+          timestamp, {"y-m": "年", "m-d": "月", "d-h": "日"});
+    } else if (format == 'yyyy.MM.dd') {
+      _dateTime = DateToStringConverter.dateAndTimeToString(
+          timestamp, {"y-m": ".", "m-d": "."});
+    } else if (format == 'yyyy/MM/dd') {
+      _dateTime = DateToStringConverter.dateAndTimeToString(
+          timestamp, {"y-m": "/", "m-d": "/"});
+    }
   }
 }

lib/report/dateTimeElement.dart

@@ -12,7 +12,7 @@ class DateTimeElement extends TextElement implements IDateTimeElement {
   bool? isRealTime;
 
   @override
-  bool? showEnabled;
+  bool? showEnabled = false;
 
   DateTimeElement.fromJson(Map<String, dynamic> json) : super.fromJson(json) {
     dateTimeFormat = json['DateTimeFormat'];