时间戳

首页 > 解决方案 > 加载内容时如何在颤动的WebView中显示微调器

flutter - 加载内容时如何在颤动的WebView中显示微调器

问题描述

我正在尝试在我的应用程序中使用 Flutter Web 视图。它正在工作，但是，我尝试启动的页面需要一些时间才能加载。因此，用户在显示内容之前会看到一个空白页面

我想继续显示微调器，直到显示页面内容

这是我尝试过的代码片段

 body: Stack(
        children: <Widget>[
          WebView(
            key: _key,
            initialUrl: widget.selectedUrl,
            javascriptMode: JavascriptMode.unrestricted,
            onPageFinished: (finish) {
              setState(() {
                isLoading = false;
              });
            },
          ),
          isLoading
              ? Center(
                  child: CircularProgressIndicator(),
                )
              : Stack(),
        ],
      ),

我看到了微调器，但在显示内容之前它就消失了。因此，大约有 5-8 秒的时间，用户会看到一个空的画布并且没有微调器

在屏幕上显示所有内容之前，如何保持微调器？

谢谢

医生摘要（要查看所有详细信息，请运行 flutter doctor -v）：[✓] Flutter（通道稳定，1.22.0，在 Mac OS X 10.15.6 19G2021 上，语言环境 en-US）

[✓] Android 工具链 - 为 Android 设备开发（Android SDK 版本 28.0.3） [✓] Xcode - 为 iOS 和 macOS 开发（Xcode 12.0） [✓] Android Studio（版本 3.6） [✓] VS Code（版本 1.49。 2) [✓] 连接设备（1 个可用）

• 未发现任何问题！

我调用的 URL 在显示页面之前会进行一些额外的验证。我在我的代码中添加了一个计时器。

不确定这是否是正确的方法

 Future.delayed(const Duration(milliseconds: 9000), () {
                  setState(() {
                    isLoading = false;
                  });
                });

标签： flutterflutterwebviewplugin

解决方案

// before build method
bool isLoading = true;

// somewhere in stateful calss
 Stack(
            children: [
              WebView(
                navigationDelegate: (NavigationRequest request) {
                  if (request.url
                      .startsWith('https://books-by-weight.herokuapp.com')) {
                    Navigator.pop(context);
                    // print('blocking navigation to $request}');
                    return NavigationDecision.prevent;
                  }
                  // print('allowing navigation to $request');
                  return NavigationDecision.navigate;
                },
                initialUrl: url
                javascriptMode: JavascriptMode.unrestricted,
                onWebViewCreated: (WebViewController webViewController) {
                  _controller.complete(webViewController);
                },
                onPageFinished: (finish) {
                  setState(() {
                    isLoading = false;
                  });
                },
              ),
              isLoading
                  ? Center(
                      child: Container(
                        height: 30,
                        width: 30,
                        child: CircularProgressIndicator(
                          backgroundColor: Colors.primaries[0],
                          strokeWidth: 3,
                        ),
                      ),
                    )
                  : Stack(),
            ],
          ),

推荐阅读