Question

我正在使用webview_fluttter插件，但是我找不到在webview显示页面之前显示CircularProgressIndicator的方法...

Android的WebViewClient onPageStarted / onPageFinished相当于什么？

WebView(
  initialUrl: url,
  onWebViewCreated: (controller) {
  },
)

谢谢

Answer 1

在0.3.5版中，存在“ onPageFinished”回调。您可以使用IndexedStack创建WebView容器。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class _WebViewContainerState extends State < WebViewContainer > {
  var _url;
  final _key = UniqueKey();
  _WebViewContainerState(this._url);
  num _stackToView = 1;

  void _handleLoad(String value) {
    setState(() {
      _stackToView = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: IndexedStack(
        index: _stackToView,
        children: [
          Column(
            children: < Widget > [
              Expanded(
                child: WebView(
                  key: _key,
                  javascriptMode: JavascriptMode.unrestricted,
                  initialUrl: _url,
                  onPageFinished: _handleLoad,
                )
              ),
            ],
          ),
          Container(
            color: Colors.white,
            child: Center(
              child: CircularProgressIndicator(),
            ),
          ),
        ],
      )
    );
  }
}

class WebViewContainer extends StatefulWidget {
  final url;
  WebViewContainer(this.url);
  @override
  createState() => _WebViewContainerState(this.url);
}

Answer 2

class _WebViewContainerState extends State<WebViewContainer> {
  var _url;
  final _key = UniqueKey();
  bool _isLoadingPage;

  Completer<WebViewController> _controller = Completer<WebViewController>();

  _WebViewContainerState(this._url);

  @override
  void initState() {
    super.initState();
    _isLoadingPage = true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          new WebView(
            key: _key,
            initialUrl: _url,
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (webViewCreate) {
              _controller.complete(webViewCreate);
            },
            onPageFinished: (finish) {
              setState(() {
                _isLoadingPage = false;
              });
            },
          ),
          _isLoadingPage
              ? Container(
                  alignment: FractionalOffset.center,
                  child: CircularProgressIndicator(),
                )
              : Container(
                  color: Colors.transparent,
                ),
        ],
      ),
    );
  }
}

Answer 3

可以使用可选参数hidden和initialChild，以便在等待页面加载时显示其他内容。如果将hidden设置为true，它将显示默认的CircularProgressIndicator。 initialChild的小部件，您可以在页面加载之前显示任意内容。

检查此页面：flutter_webview_plugin

，您可以使用initialChild

指定要显示的内容

return new MaterialApp(
  title: 'Flutter WebView Demo',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
  ),
  routes: {
    '/': (_) => const MyHomePage(title: 'Flutter WebView Demo'),
    '/widget': (_) => new WebviewScaffold(
      url: selectedUrl,
      appBar: new AppBar(
        title: const Text('Widget webview'),
      ),
      withZoom: true,
      withLocalStorage: true,
      hidden: true,
      initialChild: Container(
        child: const Center(
          child: CircularProgressIndicator(),
        ),
      ),
    ),
  },
);

Answer 4

我结合使用webview_flutter，progress_indicators

这是示例工作代码：

.app

Answer 5

这是一个简短的答案。它对我来说正常工作

  bool isLoading=true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text("Your Title",centerTitle: true
      ),
      body: Stack(
        children: <Widget>[
          new WebView(
            initialUrl: /* YourUrl*/,
            onPageFinished: (_) {
              setState(() {
                isLoading = false;
              });
            },
          ),
          isLoading ? Center( child: CircularProgressIndicator()) : Container(),
        ],
      ),
    );
  }

Answer 6

您可以在isLoading上进行操作，并在确定数据正确加载后进行更改。

import React from 'react';
import PropTypes from 'prop-types';

const Header = props => {
   const { Tag, className, text } = props;

   return (
      <Tag className={className}>
         {text}
      </Tag>
   );
}

Header.propTypes = {
   Tag: PropTypes.string.isRequired,
   className: PropTypes.string,
   text: PropTypes.string.isRequired
}

export default Header;

Answer 7

找到了解决方案。您可以添加 initialChild 并将隐藏的属性设置为true。

WebviewScaffold(
hidden: true,
  url:url,initialChild: Center(
 child: Text("Plase Wait...",style: TextStyle(
  fontWeight: FontWeight.bold,
  color: Colors.deepPurpleAccent[100]
  ),)
 ) )

Answer 8

您可以使用我的插件flutter_inappwebview，与其他插件相比，该插件具有许多事件，方法和选项，可以与IndexedStack结合使用，并可以在使用{{1 }}。

完整示例：

onLoadStop

Answer 9

我在扑朔迷离中使用了一个堆栈。

  @override
  void initState() {
    isLoading = true;
    super.initState();
  }

在构建方法中

     Stack(
        children: [
          isLoading ? Loading() : Container(),
          Container(
            child: Flex(
              direction: Axis.vertical,
              children: [
                Expanded(
                  child: InAppWebView(
                    contextMenu: contextMenu,
                    initialUrl: url,

                    onLoadSop: (InAppWebViewController controller, url) {
                      setState(() {
                        isLoading = false;
                      });
                    },
                  )
                ),
              ],
            ),
          ),
        ],
      )

Flutter：如何在WebView加载页面之前显示CircularProgressIndicator？

9 个答案: