如何在 LoadStart 上显示启动画面？

Question

我正在制作我的第一个 Flutter 应用程序，我有一个问题。我正在使用插件 flutter_inappwebview，我想显示全屏 splash/load 屏幕。最好有 Lottie 动画。我目前的代码：

 Widget build(BuildContext context) {
   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
   return Scaffold(
       body: Container(
           child: Column(children: <Widget>[
             Expanded(
               child: Stack(
                 children: [
                   InAppWebView(
                     key: webViewKey,
                     initialUrlRequest:
                     URLRequest(url: Uri.parse("https://www.google.com")),
                     initialUserScripts: UnmodifiableListView<UserScript>([]),
                     initialOptions: options,
                     pullToRefreshController: pullToRefreshController,
                     onWebViewCreated: (controller) {
                       webViewController = controller;
                     },
                     onLoadStart: (controller, url) async {
                       setState(() {
                         this.url = url.toString();
                         urlController.text = this.url;
                       });
                     },
                     androidOnPermissionRequest:
                         (controller, origin, resources) async {
                       return PermissionRequestResponse(
                           resources: resources,
                           action: PermissionRequestResponseAction.GRANT);
                     },
                     shouldOverrideUrlLoading:
                         (controller, navigationAction) async {
                       var uri = navigationAction.request.url!;

                       if (![
                         "http",
                         "https",
                         "file",
                         "chrome",
                         "data",
                         "javascript",
                         "about"
                       ].contains(uri.scheme)) {
                         if (await canLaunch(url)) {
                           // Launch the App
                           await launch(
                             url,
                           );
                           // and cancel the request
                           return NavigationActionPolicy.CANCEL;
                         }
                       }

                       return NavigationActionPolicy.ALLOW;
                     },
                     onLoadStop: (controller, url) async {
                     
                     },

                     onLoadError: (controller, url, code, message) {
                       pullToRefreshController.endRefreshing();
                     },
                     onProgressChanged: (controller, progress) {
                       if (progress == 100) {
                         pullToRefreshController.endRefreshing();
                       }
                       setState(() {
                         this.progress = progress / 100;
                         urlController.text = this.url;
                       });
                     },
                     onUpdateVisitedHistory: (controller, url, androidIsReload) {
                       setState(() {
                         this.url = url.toString();
                         urlController.text = this.url;
                       });
                     },
                     onConsoleMessage: (controller, consoleMessage) {
                       print(consoleMessage);
                     },
                   ),
                 ],
               ),
             ),

           ])));
 }
}

我是Flutter的初学者，所以如果你有解决方案，请简单点。提前致谢！

Answer 1

onLoadStart 参数让您知道加载开始的时间，因此您永远无法将启动画面放在那里，您的第二个选择是使用随附的 isLoading 方法从 webviewController 开始，它 returns true or false 表示页面何时完全加载以及何时加载。

因此您可以使用它并设置启动画面，然后在 true 时显示启动画面，在 false 时将其取出。

   bool _isLoading = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:
            Container(
                child: _isLoading
                    ? Center(
                        child: SpinKitChasingDots(
                        size: 50,
                        color: Colors.black,
                      ))
                    : Column(children: <Widget>[
                        Expanded(
                          child: Stack(
                            children: [
                              InAppWebView(
                                 key: webViewKey,
                                initialUrlRequest: URLRequest(
                                    url: Uri.parse("https://www.google.com")),
                                initialUserScripts:
                                    UnmodifiableListView<UserScript>([]),
                                 initialOptions: options,
                                pullToRefreshController:
                                    pullToRefreshController,
                                onWebViewCreated: (controller) {
                                
                                  webViewController = controller;
                                 
                                },
                                onLoadStart: (controller, url) async {
                                  setState(() {
                                    _isLoading = true;
                                  });
                                },
                                androidOnPermissionRequest:
                                    (controller, origin, resources) async {
                                  return PermissionRequestResponse(
                                      resources: resources,
                                      action: PermissionRequestResponseAction
                                          .GRANT);
                                },
                                shouldOverrideUrlLoading:
                                    (controller, navigationAction) async {
                                  var uri = navigationAction.request.url!;

                                  if (![
                                    "http",
                                    "https",
                                    "file",
                                    "chrome",
                                    "data",
                                    "javascript",
                                    "about"
                                  ].contains(uri.scheme)) {
                                    if (await canLaunch(url)) {
                                      // Launch the App
                                      await launch(
                                        url,
                                      );
                                      // and cancel the request
                                      return NavigationActionPolicy.CANCEL;
                                    }
                                  }

                                  return NavigationActionPolicy.ALLOW;
                                },
                                onLoadStop: (controller, url) async {
                                  print("We are no longer loading");
                                  setState(() {
                                    _isLoading = false;
                                  });
                                },

                                onLoadError: (controller, url, code, message) {
                                   pullToRefreshController.endRefreshing();
                                },
                                onProgressChanged: (controller, progress) async{
                                  setState(() {
                                    _isLoading = false;
                                  });
                                  SpinKitChasingDots();
                                   if (progress == 100) {
                                     pullToRefreshController.endRefreshing();
                                   }
                                   setState(() {
                                     this.progress = progress / 100;
                                     urlController.text = this.url;
                                   });
                                },
                                onUpdateVisitedHistory:
                                    (controller, url, androidIsReload) {
                                  setState(() {
                                    this.url = url.toString();
                                    //  urlController.text = this.url;
                                  });
                                },
                                onConsoleMessage: (controller, consoleMessage) {
                                  print(consoleMessage);
                                },
                              ),
                            ],
                          ),
                        ),
                      ])));
  }

在此示例中，我将 _isLoading 手动设置为 true 和 false。

这是因为我意识到如果没有构建控制器，你可以用控制器做的事情不多，这是一个例子，如果你运行它你会注意到你停留在启动画面中。

bool _isLoading = false;
  @override
  Widget build(BuildContext context) {
return Scaffold(
    body:
        Container(
            child: _isLoading
                ? Center(
                    child: SpinKitChasingDots(
                    size: 50,
                    color: Colors.black,
                  ))
                : Column(children: <Widget>[
                    Expanded(
                      child: Stack(
                        children: [
                          InAppWebView(
                            //  key: webViewKey,
                            initialUrlRequest: URLRequest(
                                url: Uri.parse("https://www.google.com")),
                            initialUserScripts:
                                UnmodifiableListView<UserScript>([]),
                            //  initialOptions: options,
                            pullToRefreshController:
                                pullToRefreshController,
                            onWebViewCreated: (controller) {
                              webViewController = controller;
                            },

                            onLoadStart: (controller, url) async {
                              setState(() {
                                _isLoading = true;
                              });

                              //  setState(() {
                              //    this.url = url.toString();
                              //    urlController.text = this.url;
                              //  });
                            },
                            androidOnPermissionRequest:
                                (controller, origin, resources) async {
                              return PermissionRequestResponse(
                                  resources: resources,
                                  action: PermissionRequestResponseAction
                                      .GRANT);
                            },
                            shouldOverrideUrlLoading:
                                (controller, navigationAction) async {
                              var uri = navigationAction.request.url!;

                              if (![
                                "http",
                                "https",
                                "file",
                                "chrome",
                                "data",
                                "javascript",
                                "about"
                              ].contains(uri.scheme)) {
                                if (await canLaunch(url)) {
                                  // Launch the App
                                  await launch(
                                    url,
                                  );
                                  // and cancel the request
                                  return NavigationActionPolicy.CANCEL;
                                }
                              }

                              return NavigationActionPolicy.ALLOW;
                            },
                            onLoadStop: (controller, url) async {
                              

                              _isLoading = await controller.isLoading();
                              
                             
                            },

                            onLoadError: (controller, url, code, message) {
                              //  pullToRefreshController.endRefreshing();
                            },
                            onProgressChanged: (controller, progress) async{
                              print("Gozimasu");
                              // bool loading = await controller.isLoading();
                              // setState(() {
                                _isLoading = await controller.isLoading();
                              // });
                              // SpinKitChasingDots();
                              //  if (progress == 100) {
                              //    pullToRefreshController.endRefreshing();
                              //  }
                              //  setState(() {
                              //    this.progress = progress / 100;
                              //    urlController.text = this.url;
                              //  });
                            },
                            onUpdateVisitedHistory:
                                (controller, url, androidIsReload) {
                              setState(() {
                                this.url = url.toString();
                                //  urlController.text = this.url;
                              });
                            },
                            onConsoleMessage: (controller, consoleMessage) {
                              print(consoleMessage);
                            },
                          ),
                        ],
                      ),
                    ),
                  ])));

}

如何在 LoadStart 上显示启动画面？

How to show a splash screen onLoadStart?

flutter

webview