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

我正在使用webview\u fluttter插件，但在webview显示页面之前，我找不到显示CircularProgressIndicator的方法

Androids WebViewClient onPageStarted/onPageFinished的等价物是什么

WebView(
initialUrl:url，
onWebViewCreated:（控制器）{
},
)

可选参数hidden和initialChild可用，以便您可以在等待页面加载时显示其他内容。如果将hidden设置为true，则将显示默认的CircularProgressIndicator。如果您另外为initialChild指定了一个小部件，则在页面加载之前，您可以让它显示任何您喜欢的内容

查看此页：

您可以使用

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(),
        ),
      ),
    ),
  },
);

---

您可以进行isLoading操作，并在确保正确加载数据后对其进行更改

    class X extends StatefulWidget {
      XState createState() => XState();
    }
    class XState extends State<X>{

    bool isLoading = false;

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

    Widget build(BuildContext context) {
    return Scaffold(
          body: Column(
              children: <Widget>[
                  isLoading ? Center(child: CircularProgressIndicator()) : WebView(...)
              ]
            )
          );
        }
    }

X类扩展了StatefulWidget{
XState createState（）=>XState（）；
}
类XState扩展状态{
bool isLoading=false；
@凌驾
void initState（）{
设置状态（）{
isLoading=true；
});
super.initState（）；
}
小部件构建（构建上下文）{
返回脚手架(
正文：专栏(
儿童：[
isLoading？中心（子项：CircularProgressIndicator（））：WebView（…）
]
)
);
}
}

我使用

下面是一个示例工作代码：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';
import 'package:progress_indicators/progress_indicators.dart';




class ContactUs extends StatefulWidget {
  @override
  _ContactUsState createState() => _ContactUsState();
}

class _ContactUsState extends State<ContactUs> {

  bool vis1 = true;
  Size deviceSize;

  @override
  Widget build(BuildContext context) {

    deviceSize = MediaQuery.of(context).size;

    final lindicator = Center(
      child: AnimatedOpacity(
        // If the Widget should be visible, animate to 1.0 (fully visible). If
        // the Widget should be hidden, animate to 0.0 (invisible).
        opacity: vis1 ? 1.0 : 0.0,
        duration: Duration(milliseconds: 500),
        // The green box needs to be the child of the AnimatedOpacity
        child: HeartbeatProgressIndicator(
          child: Container(
            width: 100.0,
            height: 50.0,
            padding: EdgeInsets.fromLTRB(35.0,0.0,5.0,0.0),
            child: Row(
              children: <Widget>[
                Icon(
                  Icons.all_inclusive, color: Colors.white, size: 14.0,),
                Text(
                  "Loading View", style: TextStyle(color: Colors.white, fontSize: 6.0),),
              ],
            ),
          ),
        ),
      ),
    );

    return new Scaffold(
      appBar: new AppBar(
        title: new Row(
            children:<Widget>[
              Text('THisApp'),
              lindicator,
            ]),
        backgroundColor: Colors.red,
      ),
      body: new Container(
          child:WebView(
            initialUrl: 'https://cspydo.com.ng/',
            javaScriptMode: JavaScriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController){
              setState(() {
                vis1=false;
              });
            },
          )
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:webview_flatter/webview_flatter.dart”；
导入“dart:async”；
导入“package:progress_indicators/progress_indicators.dart”；
类ContactUs扩展StatefulWidget{
@凌驾
_ContactUsState createState（）；
}
类_ContactUsState扩展状态{
布尔-维斯1=真；
大小设备大小；
@凌驾
小部件构建（构建上下文）{
deviceSize=MediaQuery.of（context）.size；
最终lindicator=中心(
儿童：动画能力(
//如果小部件应该可见，则将其动画设置为1.0（完全可见）。如果
//小部件应隐藏，动画设置为0.0（不可见）。
不透明度：vis1？1.0:0.0，
持续时间：持续时间（毫秒：500），
//绿色框需要是animatedcapacity的子对象
孩子：心脏跳动指示器(
子：容器(
宽度：100.0，
身高：50.0，
填充物：LTRB（35.0,0.0,5.0,0.0）的边缘设置，
孩子：排(
儿童：[
图标(
图标。全包，颜色：Colors.white，大小：14.0，），
正文(
“加载视图”，样式：TextStyle（颜色：Colors.white，fontSize:6.0），
],
),
),
),
),
);
归还新脚手架(
appBar：新的appBar(
标题：新行(
儿童：[
文本（“THisApp”），
林迪克特，
]),
背景颜色：Colors.red，
),
主体：新容器(
孩子：网络视图(
初始URL:'https://cspydo.com.ng/',
javaScriptMode:javaScriptMode.unrestricted，
onWebViewCreated:（WebViewController WebViewController）{
设置状态（）{
vis1=假；
});
},
)
),
);
}
}

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

导入“包装：颤振/材料.省道”；
导入“package:webview_flatter/webview_flatter.dart”；
类\u WebViewContainerState扩展状态{
var_-url；
最终_键=唯一键（）；
_WebViewContainerState（此url）；
num _stackToView=1；
void\u handleLoad（字符串值）{
设置状态（）{
_stackToView=0；
});
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（），
正文：IndexedStack(
索引：_stackToView，
儿童：[
纵队(
子项：[
扩大(
孩子：网络视图(
键：_键，
javascriptMode:javascriptMode.unrestricted，
初始url:\u url，
onPageFinished:_手动加载，
)
),
],
),
容器(
颜色：颜色，白色，
儿童：中心(
子对象：CircularProgressIndicator（），
),
),
],
)
);
}
}
类WebViewContainer扩展StatefulWidget{
最终网址；
WebViewContainer（this.url）；
@凌驾
createState（）=>\u WebViewContainerState（this.url）；
}

class\u WebViewContainerState扩展状态{
var_-url；
最终_键=唯一键（）；
bool_isLoadingPage；
Completer _controller=Completer（）；
_WebViewContainerState（此url）；
@凌驾
void initState（）{
super.initState（）；
_isLoadingPage=true；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：堆栈(
儿童：[
新网络视图(
键：_键，
初始url:\u url，
javascriptMode:javascriptMode.unrestricted，
onWebViewCreated:（webViewCreate）{
_controller.complete（webViewCreate）；
},
onPageFinished:（完成）{
设置状态（）{
_isLoadingPage=false；
});
},
),
_isLoadingPage
？容器(
对齐：分馏loffset.center，
子对象：CircularProgressIndicator（），
)
：容器(
颜色：颜色。透明，
),
],
),
);
}
}

找到了解决方案。您可以添加initialChild并设置属性h

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,
                ),
        ],
      ),
    );
  }
}

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

  initState() {
    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(),
        ],
      ),
    );
  }

  @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;
                      });
                    },
                  )
                ),
              ],
            ),
          ),
        ],
      )