0

我用 Flutter InAppWebView 构建了一个混合应用程序，它只显示一个网站，而没有提示用户基本上是在与浏览器交互。

凭借快速的互联网连接，它可以完美运行。但是，当站点需要一些时间来加载时，在站点加载并呈现之前，什么都不会发生。在此加载时间内，该应用程序似乎已挂起。

当我激活 LinearProgressIndicator 时，您意识到应用程序正在加载。但是，如果互联网连接良好，网站加载速度非常快，以至于 ProgressIndicator 是一个烦人且不必要的细节。

因此，我只想在加载过程花费超过 800 毫秒的时间时才显示 ProgressIndicator。我尝试使用 Flutter 计时器来实现这一点，该计时器将变量设置为 true 以执行 onProgressChanged 中的代码。

// to indicatr in onProgressChanged that the specific time is over 
// and the progress bar should be displayed 
bool loadTimerover = false; 

// timer object that is created in onLoadStart and cleared in onLoadStop
late Timer loadbartimer;

.
.
.

InAppWebView(
    key: webViewKey,
    initialUrlRequest:
    URLRequest(url: Uri.parse("https://www.example.com/")),
    initialOptions: options,
    pullToRefreshController: pullToRefreshController,
    onWebViewCreated: (controller) {
    webViewController = controller;
    },

    onLoadStart: (controller, url) {
      setState(() {
        this.url = url.toString();
        urlController.text = this.url;
      });
      this.loadbartimer = Timer(
        Duration(milliseconds: 800), () {
        setState(() {
          this.loadTimerover = true;
        });
        }
      );  
    },

    onLoadStop: (controller, url) async {
      pullToRefreshController.endRefreshing();
      setState(() {
        this.url = url.toString();
        urlController.text = this.url;
      });
      // to reset the variable for the next siteload
      // if loadtimer finished this is necessary
      this.loadTimerover = false;

      // stop the loadtimer if he isnt done
      try {
        this.loadbartimer.cancel();
      }catch(e) {}
     },
                                
    onProgressChanged: (controller, progress) {
      // to show load progress only if it takes longer
      // than 800ms 
      if (this.loadTimerover == true) {
        if (progress == 100) {
          pullToRefreshController.endRefreshing();
        }

        setState(() {
          this.progress = progress / 100;
          urlController.text = this.url;
        });
        }
      },
    ),
    progress < 1.0
    ? LinearProgressIndicator(value: progress,
    valueColor: new AlwaysStoppedAnimation<Color>(Color(0xfffffffa)),
    backgroundColor: Color(0xfffb5148),
    )
    : Container(),

通过这种方式，当网站快速加载时，ProgressIndicator 会被隐藏。但是如果连接不好，加载站点需要几秒钟，ProgressIndicator 只会在站点呈现之前快速弹出。因此，在加载期间，它看起来再次像应用程序已挂起。如果加载过程花费的时间超过 800 毫秒，则 ProgressIndicator 应该像正常工作一样顺利。

我希望我已经充分解释了这个问题。

提前致谢

4

0 回答 0