Flutter：如何知道 WebView 完成加载？答案

【问题标题】：Flutter: How to know WebView finish loading?Flutter：如何知道 WebView 完成加载？
【发布时间】：2020-03-24 00:49:29
【问题描述】：

我是 Flutter 的新手，并试图在我的应用程序上显示一些页面（第三方页面）。然而，当页面加载时，白屏不知何故让用户认为应用程序不工作。我想知道在网站完成加载之前是否有任何方法可以在应用程序上实现加载图标。或者 WebView 是否有任何信号表明网站正在加载？

【问题讨论】：

标签： flutter webview loading

【解决方案1】：

检查页面是否完成使用onPageFinished，

 onPageFinished: (String url) {
                  print('Page finished loading: $url');
                  //hide you progressbar here
                setState(() {
                isLoading = false;
              });
                },

我已经创建了一个工作源代码here

【讨论】：

感谢您的回答，拉文德。我会试试的！
这行得通。我刚刚在我的 WebView 中进行了测试。当我在 WebView 页面之间移动时，我将使用相同的逻辑来显示 CircularProgressIndicator。 TX Ravinder :))

【解决方案2】：

这就是我实现加载器的方式。

_stackToView = 1 - 显示加载器

_stackToView = 0 - 显示网页视图

class MyWebViewWidget extends StatefulWidget {
  @override
  _MyWebViewWidgetState createState() => _MyWebViewWidgetState();
}

class _MyWebViewWidgetState extends State<MyWebViewWidget> {
  num _stackToView = 1;

  @override
  Widget build(BuildContext context) {
    return IndexedStack(
      index: _stackToView,
      children: [
        WebView(
          initialUrl: "https://www.google.com/",
          onPageFinished: (String url) {
            // should be called when page finishes loading
            setState(() {
              _stackToView = 0;
            });
          },
        ),
        Container(child: Center(child: CircularProgressIndicator())),
      ],
    );
  }
}

【讨论】：

感谢您的回答，坚果。我会试试的！

【解决方案3】：

这取决于您使用的WebView 的库。 Flutter 没有内置的WebView，因此我现在根据 2 个著名的库来回答。

使用webview_flutter：WebView 小部件提供了onPageFinished 回调。

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  bool _finished = false;
  bool get finished => _finished;

  @override
  Widget build(BuildContext context) => WebView(
      initialUrl: "https://www.google.com.vn",
      onPageFinished: (String url) {
            setState(() => _finished = true);
        },
      ),
    );
}

使用flutter_webview_plugin：您应该创建一个新的FlutterWebviewPlugin ínance。 FlutterWebviewPlugin íntance 提供了onProgressChanged 回调。

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  final _controller = FlutterWebviewPlugin();
  StreamSubscription<double> _onProgressChanged;
  double _loadProgress = -1;
  bool get finished => _loadProgress == 1.0;

  @override
  void initState() {
    super.initState();
    _controller.close();
    _onProgressChanged = _controller.onProgressChanged.listen((progress) async {
      setState(() {
        _loadProgress = progress;
      });
    });
  }

  @override
  void dispose() {
    _onProgressChanged.cancel();
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => null;
}

【讨论】：