如何在加载 WebView 之前显示加载指示器?

时间:2021-06-27 15:05:33

标签: flutter webview loading

我想在加载我的 WebView 之前使用 flutter_spinkit 并显示一个微调器。加载日历网站需要几秒钟,所以我想在加载时有一个微调器。

谢谢!

import "package:flutter/material.dart";
import 'package:webview_flutter/webview_flutter.dart';

class HS extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("High School Calendar"),
        backgroundColor: Color(0xFF04103E),
      ),
      body: SafeArea(
        child: WebView(
          initialUrl: "https://calendar.google.com",
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

更新代码:

import "package:flutter/material.dart";
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

class HS extends StatelessWidget {
  bool loading = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("High School Calendar"),
        backgroundColor: Color(0xFF04103E),
      ),
      body: SafeArea(
        child: loading
            ? WebView(
                initialUrl: "https://calendar.google.com",
                javascriptMode: JavascriptMode.unrestricted,
                onPageFinished: handleLoad(),
              )
            : SpinKitCircle(),
      ),
    );
  }

  handleLoad() {
    loading = false;
  }
}

1 个答案:

答案 0 :(得分:0)

将布尔变量全局分配为 true 并在页面完成时更改。您可以查看 WebView 中的“onPage”属性。

  child: something ? WebView(
              initialUrl: "https://calendar.google.com",
              javascriptMode: JavascriptMode.unrestricted,
              onPageFinished: _handleLoad,
            ): YourIndicator(),
    
    _handleLoad(){
setState(() { something = false; });
     
    }
相关问题