且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在 WebView Flutter 中显示加载指示器?

更新时间:2023-12-05 18:24:16

完整示例

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.