修改Picker组件自动关闭问题

Tencent · Mar 15, 2024 · b6c191e · b6c191e
1 parent 3a7de1b
commit b6c191e
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 5 deletions.
diff --git a/tdesign-component/CHANGELOG.md b/tdesign-component/CHANGELOG.md
@@ -6,6 +6,7 @@
   - add: Support for customizing the corner radius size through TDButtonStyle.radius
 - `TDPicker`:
   - add: Picker component scrolling on PC now supports mouse dragging
+  - add: For TDPicker and TDDatePicker components, the onConfirm no longer defaults to pop up the component internally, allowing external customization; when OnCancel is not empty, the component will not automatically pop.
 - `TDSwitch`:
   - add: onChanged now supports externally specifying whether to consume the event. If it has been consumed, it will no longer be processed internally ([#27](https://github.com/Tencent/tdesign-flutter/issues/27))
 - `TDBottomTabBar`:

diff --git a/tdesign-component/example/lib/page/td_date_picker_page.dart b/tdesign-component/example/lib/page/td_date_picker_page.dart
@@ -64,6 +64,7 @@ class _TDDatePickerPageState extends State<TDDatePickerPage> {
               setState(() {
                 selected_1 = '${selected['year'].toString().padLeft(4, '0')}-${selected['month'].toString().padLeft(2, '0')}-${selected['day'].toString().padLeft(2, '0')}';
               });
+              Navigator.of(context).pop();
             },
             dateStart: [1999, 01, 01],
             dateEnd: [2023, 12, 31],
@@ -83,6 +84,7 @@ class _TDDatePickerPageState extends State<TDDatePickerPage> {
                 selected_2 = '${selected['year'].toString().padLeft(4, '0')}-'
                     '${selected['month'].toString().padLeft(2, '0')}';
               });
+              Navigator.of(context).pop();
             },
             useDay: false,
             dateStart: [1999, 01, 01],
@@ -103,6 +105,7 @@ class _TDDatePickerPageState extends State<TDDatePickerPage> {
                 selected_3 = '${selected['month'].toString().padLeft(2, '0')}-'
                     '${selected['day'].toString().padLeft(2, '0')}';
               });
+              Navigator.of(context).pop();
             },
             useYear: false,
             dateStart: [1999, 01, 01],
@@ -124,6 +127,7 @@ class _TDDatePickerPageState extends State<TDDatePickerPage> {
                     '${selected['minute'].toString().padLeft(2, '0')}:'
                     '${selected['second'].toString().padLeft(2, '0')}';
               });
+              Navigator.of(context).pop();
             },
             useYear: false,
             useMonth: false,
@@ -153,6 +157,7 @@ class _TDDatePickerPageState extends State<TDDatePickerPage> {
                     '${selected['minute'].toString().padLeft(2, '0')}:'
                     '${selected['second'].toString().padLeft(2, '0')}';
               });
+              Navigator.of(context).pop();
             },
             useHour: true,
             useMinute: true,
@@ -177,6 +182,7 @@ class _TDDatePickerPageState extends State<TDDatePickerPage> {
                     '${selected['day'].toString().padLeft(2, '0')} '
                     '${weekDayList[selected['weekDay']! - 1]}';
               });
+              Navigator.of(context).pop();
             },
             useWeekDay: true,
             dateStart: [1999, 01, 01],
@@ -198,6 +204,7 @@ class _TDDatePickerPageState extends State<TDDatePickerPage> {
                     '${selected['month'].toString().padLeft(2, '0')}-'
                     '${selected['day'].toString().padLeft(2, '0')}';
               });
+              Navigator.of(context).pop();
             },
             dateStart: [1999, 01, 01],
             dateEnd: [2023, 12, 31],
@@ -218,6 +225,7 @@ class _TDDatePickerPageState extends State<TDDatePickerPage> {
                     '${selected['month'].toString().padLeft(2, '0')}-'
                     '${selected['day'].toString().padLeft(2, '0')}';
               });
+              Navigator.of(context).pop();
             },
             dateStart: [1999, 01, 01],
             dateEnd: [2023, 12, 31],

diff --git a/tdesign-component/example/lib/page/td_picker_page.dart b/tdesign-component/example/lib/page/td_picker_page.dart
@@ -85,6 +85,7 @@ class _TDPickerPageState extends State<TDPickerPage> {
               setState(() {
                 selected_1 = '${data_1[selected[0]]}';
               });
+              Navigator.of(context).pop();
             }, data: [data_1]);
       },
       child: buildSelectRow(context, selected_1, '选择地区'),
@@ -100,6 +101,7 @@ class _TDPickerPageState extends State<TDPickerPage> {
               setState(() {
                 selected_2 = '${data_2[0][selected[0]]} ${data_2[1][selected[1]]}';
               });
+              Navigator.of(context).pop();
             }, data: data_2);
       },
       child: buildSelectRow(context, selected_2, '选择时间'),
@@ -115,6 +117,7 @@ class _TDPickerPageState extends State<TDPickerPage> {
               setState(() {
                 selected_3 = '${selected[0]} ${selected[1]} ${selected[2]}';
               });
+              Navigator.of(context).pop();
             },
             data: data_3,
             columnNum: 3,
@@ -133,6 +136,7 @@ class _TDPickerPageState extends State<TDPickerPage> {
               setState(() {
                 selected_4 = '${data_1[selected[0]]}';
               });
+              Navigator.of(context).pop();
             }, data: [data_1]);
       },
       child: buildSelectRow(context, selected_4, '带标题选择器'),
@@ -148,6 +152,7 @@ class _TDPickerPageState extends State<TDPickerPage> {
               setState(() {
                 selected_5 = '${data_1[selected[0]]}';
               });
+              Navigator.of(context).pop();
             }, data: [data_1]);
       },
       child: buildSelectRow(context, selected_5, '无标题选择器'),

diff --git a/tdesign-component/lib/src/components/picker/td_date_picker.dart b/tdesign-component/lib/src/components/picker/td_date_picker.dart
@@ -316,8 +316,9 @@ class _TDDatePickerState extends State<TDDatePicker> {
                     'second': widget.model.useSecond ? widget.model.secondFixedExtentScrollController.selectedItem : -1,
                   };
                   widget.onCancel!(selected);
+                } else {
+                  Navigator.of(context).pop();
                 }
-                Navigator.of(context).pop();
               },
               behavior: HitTestBehavior.opaque,
               child: TDText(widget.leftText,

diff --git a/tdesign-component/lib/src/components/picker/td_multi_picker.dart b/tdesign-component/lib/src/components/picker/td_multi_picker.dart
@@ -202,8 +202,9 @@ class TDMultiPicker extends StatelessWidget {
                     for (var i = 0; i < controllers.length; i++)
                       controllers[i].selectedItem
                   ]);
+                } else {
+                  Navigator.of(context).pop();
                 }
-                Navigator.of(context).pop();
               },
               behavior: HitTestBehavior.opaque,
               child: TDText(
@@ -239,7 +240,6 @@ class TDMultiPicker extends StatelessWidget {
                     controllers[i].selectedItem
                 ]);
               }
-              Navigator.of(context).pop();
             },
             behavior: HitTestBehavior.opaque,
             child: TDText(
@@ -543,8 +543,9 @@ class _TDMultiLinkedPickerState extends State<TDMultiLinkedPicker> {
               onTap: () {
                 if (widget.onCancel != null) {
                   widget.onCancel!(model.selectedData);
+                } else {
+                  Navigator.of(context).pop();
                 }
-                Navigator.of(context).pop();
               },
               behavior: HitTestBehavior.opaque,
               child: TDText(
@@ -577,7 +578,6 @@ class _TDMultiLinkedPickerState extends State<TDMultiLinkedPicker> {
               if (widget.onConfirm != null) {
                 widget.onConfirm!(model.selectedData);
               }
-              Navigator.of(context).pop();
             },
             behavior: HitTestBehavior.opaque,
             child: TDText(

diff --git a/tdesign-site/CHANGELOG.md b/tdesign-site/CHANGELOG.md
@@ -12,6 +12,7 @@ docClass: timeline
   - add:支持通过TDButtonStyle.radius自定义圆角大小
 - `TDPicker`:
   - add: picker组件滚动PC支持鼠标拖拽
+  - add: TDPicker和TDDatePicker组件,onConfirm内部不在默认pop弹窗组件,允许外部自定义处理;OnCancel不为空时不再自动pop组件
 - `TDSwitch`:
   - add: onChanged支持外部指定是否消费事件,如果已消费则内部不再处理([#27](https://github.com/Tencent/tdesign-flutter/issues/27))
 - `TDBottomTabBar`: