如何在 WebView Flutter 中显示加载指示器? [英] How to show Loading Indicator in WebView Flutter?

问题描述

我想在屏幕上显示的Web视图数据之前先显示正在加载".该怎么办?

I want to show Loading first before the web view data displayed on the screen. How can do that?

这是我的代码:

class WebDetailPage extends StatelessWidget {
  final String title;
  final String webUrl;

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

  WebDetailPage({
    @required this.title,
    @required this.webUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colour.white,
        title: Text(title, style: TextStyle(color: Colour.midnightBlue)),
        leading: IconButton(
            icon: Icon(Icons.arrow_back, color: Colour.midnightBlue),
            onPressed: () => Navigator.of(context).pop()),
      ),
      body: Center(
        child: WebView(
          initialUrl: webUrl,
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
        ),
      )
    );
  }
}

有人可以帮助我解决这个问题吗?因为我已经对其进行了搜索和研究，仍然可以找到解决方案.

Can someone help me with this problem? Because I already search and research about it still can find the solution.

推荐答案

完整示例

class WebViewState extends State<WebViewScreen>{

  String title,url;
  bool isLoading=true;
  final _key = UniqueKey();
  
  WebViewState(String title,String url){
    this.title=title;
    this.url=url;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
          title: Text(this.title,style: TextStyle(fontWeight: FontWeight.w700)),centerTitle: true
      ),
      body: Stack(
        children: <Widget>[
          WebView(
            key: _key,
            initialUrl: this.url,
            javascriptMode: JavascriptMode.unrestricted,
            onPageFinished: (finish) {
              setState(() {
                isLoading = false;
              });
            },
          ),
          isLoading ? Center( child: CircularProgressIndicator(),)
                    : Stack(),
        ],
      ),
    );
  }

}

我只使用 Stack 小部件，因此在webview设置加载指示器上方.当调用Webview的 onPageFinished 时，我设置了 isLoading = false 变量值并设置了透明容器.

I just use Stack widget so on top of webview set loading indicator. When callonPageFinished of webview I set isLoading=false variable value and set transparent container.

这篇关于如何在 WebView Flutter 中显示加载指示器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！