我是新手,所以想知道将Spinkit添加到当前布局的最佳方法是什么。例如,当我按下按钮以在下一个屏幕上连接到Webview时。加载Web视图当前需要2-4秒,我希望出现进度指示器。我想创建一个叠加布局(不透明度),以在加载Webview后完成其动画。
这是我当前的Webview代码:
class MyWebView extends StatelessWidget {
final String title;
final String selectedUrl;
final Completer<WebViewController> _controller =
Completer<WebViewController>();
MyWebView({
@required this.title,
@required this.selectedUrl,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepPurpleAccent,
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
onPressed: () => Navigator.of(context).pop(),
),
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Image.asset(
// 'assets/logo.png',
// fit: BoxFit.contain,
// height: 32,
// ),
Container(
padding: const EdgeInsets.only(
left: 8.0, right: 64.0, top: 8.0, bottom: 8.0),
child: Image.asset(
'assets/White logo - no background.png',
alignment: Alignment.center,
),
),
],
),
),
body: WebView(
initialUrl: selectedUrl,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
));
}
}
我了解我需要在代码中插入以下代码,但是不确定在哪里,并且还想知道如何在此代码中包含期货:
final spinkit = SpinKitSquareCircle(
color: Colors.white,
size: 50.0,
controller: AnimationController(vsync: this, duration: const Duration(milliseconds: 1200)),
);
答案 0 :(得分:0)
您需要使用bool isLoading
来检测Page是否已完成加载,基于此您可以隐藏或显示SpinKitSquareCircle。
class WebViewPage extends StatefulWidget {
@override
_WebViewPageState createState() => _WebViewPageState();
}
class _WebViewPageState extends State<WebViewPage> with SingleTickerProviderStateMixin{
bool isLoading = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
WebView(
initialUrl: 'https://www.google.com/',
javascriptMode: JavascriptMode.unrestricted,
onPageFinished: (String url) {
setState(() {
//hide you progressbar here
isLoading = false;
});
},
),
isLoading ? SpinKitSquareCircle(
color: Colors.red,
size: 50.0,
controller: AnimationController(vsync: this,duration: const Duration(milliseconds: 1200)),
) : Stack()
],
),);;
}
}
您也可以在this gist中找到代码。
另外,如果您只想加载gif,则不必添加flutter_spinkit库,只需在Image.asset上加载gif,
Image.asset(
"images/loading.gif",
height: 125.0,
width: 125.0,
)