我想在屏幕上显示web视图数据之前先显示加载.你怎么能做到?

这是我的代码:

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

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

推荐答案

完整示例

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的调用onPageFinished时,我设置了isLoading=false个变量值,并设置了透明容器.

Flutter相关问答推荐

创建多个具有适当填充和对齐的按钮的最佳方法

如何防止alert 对话框在收到通知时出现在某个flutter页面中

如何在Flutter 中不从getX库中初始化GetxController中的变量

如何组合匹配器

点击表情符号按钮后,Flutter 文本域文本编辑控制器将文本恢复为原始值

查询满足AND条件的文档的FiRestore

框中的Flutter 适配图像

如何在Flutter 中创造以下效果

Flutter:无法构建iOS应用程序-找不到PigeonParser.h文件

如何手动将 FirebaseAuth 用户邮箱验证状态设置为 true

尽管 onCollision 处理了我的角色还是从平台上掉了下来

Flutter http 请求获取 null

如何使Flutter 边框宽度在外面而不是在里面?

忽略异步函数上的 context.mounted 访问 linting 错误是否安全?

无法使用 bloc 更新 ListView.builder 的特定时间

将 String 与 List 元素进行比较时出现问题

如何根据字符串值动态构建和显示小部件?

如何将图像网络装箱到具有边界半径的容器中

Android Studio 模拟器屏幕闪烁

如何从 Firebase Firestore 中获取具有特定字段值的文档?