Browse Source

增加webview用的进度条

gjh 4 days ago
parent
commit
01111f9e5c
2 changed files with 116 additions and 29 deletions
  1. 43 29
      lib/pages/web/webview_page.dart
  2. 73 0
      lib/widget/webview_progress_bar.dart

+ 43 - 29
lib/pages/web/webview_page.dart

@@ -1,6 +1,7 @@
1 1
 import 'package:auto_route/annotations.dart';
2 2
 import 'package:eitc_erm_dental_flutter/exts.dart';
3 3
 import 'package:eitc_erm_dental_flutter/funcs.dart';
4
+import 'package:eitc_erm_dental_flutter/widget/webview_progress_bar.dart';
4 5
 import 'package:flutter/foundation.dart';
5 6
 import 'package:flutter/material.dart';
6 7
 import 'package:flutter_inappwebview/flutter_inappwebview.dart';
@@ -34,6 +35,9 @@ class _WebviewPageState extends State<WebviewPage> {
34 35
       iframeAllowFullscreen: true,
35 36
       javaScriptEnabled: true);
36 37
 
38
+  final WebviewProgressBarController _progressBarController =
39
+      WebviewProgressBarController();
40
+
37 41
   @override
38 42
   void initState() {
39 43
     super.initState();
@@ -42,6 +46,7 @@ class _WebviewPageState extends State<WebviewPage> {
42 46
   @override
43 47
   void dispose() {
44 48
     super.dispose();
49
+    _progressBarController.dispose();
45 50
   }
46 51
 
47 52
   void _load() async {
@@ -67,35 +72,44 @@ class _WebviewPageState extends State<WebviewPage> {
67 72
       ),
68 73
       //body: SafeArea(child: WebViewWidget(controller: _controller)),
69 74
       body: SafeArea(
70
-        child: InAppWebView(
71
-          key: _webViewKey,
72
-          initialSettings: _settings,
73
-          onWebViewCreated: (controller) {
74
-            _webViewController = controller;
75
-            _load();
76
-          },
77
-          onLoadStart: (controller, url) {
78
-            logd("onLoadStart,url=$url");
79
-          },
80
-          onPermissionRequest: (controller, request) async {
81
-            return PermissionResponse(
82
-                resources: request.resources,
83
-                action: PermissionResponseAction.GRANT);
84
-          },
85
-          onLoadStop: (controller, url) async {
86
-            logd("onLoadStop,url=$url");
87
-          },
88
-          onReceivedError: (controller, request, error) {
89
-            loge("onReceivedError", error: error);
90
-          },
91
-          onProgressChanged: (controller, progress) {
92
-            logd("onProgressChanged,progress=$progress");
93
-          },
94
-          onConsoleMessage: (controller, consoleMessage) {
95
-            if (kDebugMode) {
96
-              logd(consoleMessage);
97
-            }
98
-          },
75
+        child: Stack(
76
+          children: [
77
+            InAppWebView(
78
+              key: _webViewKey,
79
+              initialSettings: _settings,
80
+              onWebViewCreated: (controller) {
81
+                _webViewController = controller;
82
+                _load();
83
+              },
84
+              onLoadStart: (controller, url) {
85
+                logd("onLoadStart,url=$url");
86
+              },
87
+              onPermissionRequest: (controller, request) async {
88
+                return PermissionResponse(
89
+                    resources: request.resources,
90
+                    action: PermissionResponseAction.GRANT);
91
+              },
92
+              onLoadStop: (controller, url) async {
93
+                logd("onLoadStop,url=$url");
94
+              },
95
+              onReceivedError: (controller, request, error) {
96
+                loge("onReceivedError", error: error);
97
+              },
98
+              onProgressChanged: (controller, progress) {
99
+                logd("onProgressChanged,progress=$progress");
100
+                _progressBarController.setProgress(progress);
101
+              },
102
+              onConsoleMessage: (controller, consoleMessage) {
103
+                if (kDebugMode) {
104
+                  logd(consoleMessage);
105
+                }
106
+              },
107
+            ),
108
+            Align(
109
+              alignment: Alignment.topLeft,
110
+              child: WebviewProgressBar(controller: _progressBarController),
111
+            )
112
+          ],
99 113
         ),
100 114
       ),
101 115
     );

+ 73 - 0
lib/widget/webview_progress_bar.dart

@@ -0,0 +1,73 @@
1
+import 'package:flutter/material.dart';
2
+
3
+///Webview进度条
4
+class WebviewProgressBar extends StatefulWidget {
5
+  final WebviewProgressBarController controller;
6
+  final bool autoHide;
7
+  final Color? backgroundColor;
8
+  final Color? color;
9
+  final Animation<Color?>? valueColor;
10
+  final String? semanticsLabel;
11
+  final String? semanticsValue;
12
+  final BorderRadiusGeometry borderRadius;
13
+
14
+  const WebviewProgressBar(
15
+      {super.key,
16
+      required this.controller,
17
+      this.autoHide = true,
18
+      this.backgroundColor,
19
+      this.color,
20
+      this.valueColor,
21
+      this.semanticsLabel,
22
+      this.semanticsValue,
23
+      this.borderRadius = BorderRadius.zero});
24
+
25
+  @override
26
+  State<WebviewProgressBar> createState() => _WebviewProgressBarState();
27
+}
28
+
29
+class _WebviewProgressBarState extends State<WebviewProgressBar> {
30
+  @override
31
+  void initState() {
32
+    super.initState();
33
+    widget.controller.progress.addListener(() {
34
+      setState(() {});
35
+    });
36
+  }
37
+
38
+  @override
39
+  Widget build(BuildContext context) {
40
+    WebviewProgressBarController controller = widget.controller;
41
+    if (controller.progress.value >= 100 && widget.autoHide) {
42
+      return SizedBox();
43
+    }
44
+    return LinearProgressIndicator(
45
+      value: controller.progress.value / 100,
46
+      backgroundColor: widget.backgroundColor,
47
+      color: widget.color,
48
+      valueColor: widget.valueColor,
49
+      semanticsLabel: widget.semanticsLabel,
50
+      semanticsValue: widget.semanticsValue,
51
+      borderRadius: widget.borderRadius,
52
+    );
53
+  }
54
+}
55
+
56
+///Webview进度条控制器
57
+class WebviewProgressBarController {
58
+  ///进度
59
+  ValueNotifier<int>? _progress;
60
+
61
+  ///进度
62
+  ValueNotifier<int> get progress => _progress ??= ValueNotifier(0);
63
+
64
+  ///设置进度
65
+  void setProgress(int value) {
66
+    progress.value = value;
67
+  }
68
+
69
+  void dispose() {
70
+    _progress?.dispose();
71
+    _progress = null;
72
+  }
73
+}