Merge pull request #15 from Tencent/feature/td_loading_dismiss

add: 加载添加显示与隐藏的方法
Tencent · Dec 29, 2023 · e1b8810 · e1b8810
2 parents 5444cbe + 406e33b
commit e1b8810
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 33 deletions.
diff --git a/tdesign-component/example/lib/page/td_loading_page.dart b/tdesign-component/example/lib/page/td_loading_page.dart
@@ -21,6 +21,7 @@ class _TDLoadingPageState extends State<TDLoadingPage> {
   var rowSpace = const SizedBox(
     width: 52,
   );
+
   @override
   Widget build(BuildContext context) {
     return ExamplePage(
@@ -31,8 +32,7 @@ class _TDLoadingPageState extends State<TDLoadingPage> {
       children: [
         ExampleModule(title: '组件类型', children: [
           ExampleItem(desc: '纯图标', builder: _buildPureIconLoading),
-          ExampleItem(
-              desc: '图标加文字横向', builder: _buildTextIconHorizontalLoading),
+          ExampleItem(desc: '图标加文字横向', builder: _buildTextIconHorizontalLoading),
           ExampleItem(desc: '图标加文字竖向', builder: _buildTextIconVerticalLoading),
           ExampleItem(desc: '纯文字', builder: _buildPureTextLoading),
         ]),
@@ -96,32 +96,56 @@ class _TDLoadingPageState extends State<TDLoadingPage> {
         ExampleItem(
             desc: '验证居中问题',
             ignoreCode: true,
-            builder: (_){
-          var list = const [
-            TDLoading(
-              size: TDLoadingSize.large,
-              icon: TDLoadingIcon.circle,
-              text: '加载中…',
-              axis: Axis.vertical,
-            ),
-            TDLoading(
-              size: TDLoadingSize.large,
-              icon: TDLoadingIcon.activity,
-              text: '加载中…',
-              axis: Axis.vertical,
-            ),
-          ];
-          return Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16),
-              child: Row(
-                  children: list.fold(
-                      [],
-                          (previousValue, element) =>
-                      [...previousValue, Container(
-                        color: TDTheme.of(context).grayColor6,
-                        child: element,
-                      ), rowSpace])));
-        })
+            builder: (_) {
+              var list = const [
+                TDLoading(
+                  size: TDLoadingSize.large,
+                  icon: TDLoadingIcon.circle,
+                  text: '加载中…',
+                  axis: Axis.vertical,
+                ),
+                TDLoading(
+                  size: TDLoadingSize.large,
+                  icon: TDLoadingIcon.activity,
+                  text: '加载中…',
+                  axis: Axis.vertical,
+                ),
+              ];
+              return Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 16),
+                  child: Row(
+                      children: list.fold(
+                          [],
+                          (previousValue, element) => [
+                                ...previousValue,
+                                Container(
+                                  color: TDTheme.of(context).grayColor6,
+                                  child: element,
+                                ),
+                                rowSpace
+                              ])));
+            }),
+        ExampleItem(
+            desc: '展示/隐藏Loading',
+            ignoreCode: true,
+            builder: (_) {
+              var list = [
+                TDButton(
+                  text: '展示Loading',
+                  theme: TDButtonTheme.primary,
+                  onTap: () {
+                    TDLoadingController.show(context);
+                  },
+                ),
+                const SizedBox(width: 24,),
+                const TDButton(
+                  text: '隐藏Loading',
+                  theme: TDButtonTheme.primary,
+                  onTap: TDLoadingController.dismiss,
+                ),
+              ];
+              return Padding(padding: const EdgeInsets.symmetric(horizontal: 16), child: Row(children: list, ));
+            })
       ],
     );
   }
@@ -130,11 +154,7 @@ class _TDLoadingPageState extends State<TDLoadingPage> {
   Widget _buildRow(List<Widget> list) {
     return Padding(
         padding: const EdgeInsets.symmetric(horizontal: 16),
-        child: Row(
-            children: list.fold(
-                [],
-                (previousValue, element) =>
-                    [...previousValue, element, rowSpace])));
+        child: Row(children: list.fold([], (previousValue, element) => [...previousValue, element, rowSpace])));
   }
 
   /// 纯图标

diff --git a/tdesign-component/lib/src/components/loading/td_loading_controller.dart b/tdesign-component/lib/src/components/loading/td_loading_controller.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'td_loading.dart';
+
+class TDLoadingController {
+  static BuildContext? _context;
+  static OverlayEntry? _overlayEntry;
+
+  static bool _isShowing = false;
+
+  // 展示
+  static void show(BuildContext context,
+      {Widget? child,
+      TDLoadingSize size = TDLoadingSize.medium,
+      TDLoadingIcon? icon = TDLoadingIcon.circle,
+      Color? iconColor,
+      String text = '加载中',
+      Widget? refreshWidget,
+      Color textColor = Colors.black,
+      Axis axis = Axis.vertical,
+      Widget? customIcon,
+      int duration = 2000}) {
+
+    if (_isShowing) {
+      print('warn: TDLoading is showing!');
+      return;
+    }
+
+    _overlayEntry = OverlayEntry(builder: (context) {
+      return Center(
+        child: child ??
+            TDLoading(
+              size: size,
+              icon: icon,
+              customIcon: customIcon,
+              text: text,
+              textColor: textColor,
+              refreshWidget: refreshWidget,
+              duration: duration,
+              iconColor: iconColor,
+              axis: axis,
+            ),
+      );
+    });
+
+    _context = context;
+    if (_context == null || _overlayEntry == null) {
+      print('error: TDLoading is not init!:${_context} ${_overlayEntry}');
+      return;
+    }
+    _isShowing = true;
+    Overlay.of(_context!).insert(_overlayEntry!);
+  }
+
+  // 消失
+  static void dismiss() {
+    if (_isShowing) {
+     if (_overlayEntry != null && _overlayEntry!.mounted) {
+       _overlayEntry?.remove();
+       _overlayEntry = null;
+     }
+      _isShowing = false;
+    }
+  }
+}
diff --git a/tdesign-component/lib/tdesign_flutter.dart b/tdesign-component/lib/tdesign_flutter.dart
@@ -15,6 +15,7 @@ export 'src/components/input/td_input.dart';
 export 'src/components/link/td_link.dart';
 export 'src/components/loading/td_circle_indicator.dart';
 export 'src/components/loading/td_loading.dart';
+export 'src/components/loading/td_loading_controller.dart';
 export 'src/components/navbar/td_nav_bar.dart';
 export 'src/components/picker/td_date_picker.dart';
 export 'src/components/picker/td_item_widget.dart';