如何在网页视图中实现每一个页面加载颤振的进度指示器?

Question

我目前在webview加载之前使用这个代码显示进度指示器:

My Full main。飞镖代码:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
//import 'package:mtcl/utils/AppColors.dart';
import 'package:custom_splash/custom_splash.dart';
import 'package:connectivity/connectivity.dart';
void main() {
//runApp(MyApp());
//var result = Connectivity().checkConnectivity();
WidgetsFlutterBinding.ensureInitialized();
runApp(MyApp());
// if (result == ConnectivityResult.none) {
//   WidgetsFlutterBinding.ensureInitialized();
//   runApp(MyApp());
// } else if (result == ConnectivityResult.mobile) {
//   WidgetsFlutterBinding.ensureInitialized();
//   runApp(MyApp());
// } else if (result == ConnectivityResult.wifi) {
//   WidgetsFlutterBinding.ensureInitialized();
//   runApp(MyApp());
// }
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "MTCL Client",
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.red,
),
home: Scaffold(body: splash()));
}
}
class splash extends StatefulWidget {
@override
_splashState createState() => _splashState();
}
class _splashState extends State<splash> {
@override
Widget build(BuildContext context) {
return CustomSplash(
backGroundColor: Color(0xFFFF9800),
imagePath: "assets/images/logo.png",
home: WebViewClass(),
duration: 10,
animationEffect: "zoom-in",
);
}
}
class WebViewClass extends StatefulWidget {
WebViewState createState() => WebViewState();
}
class WebViewState extends State<WebViewClass> {
num position = 1;
final key = UniqueKey();
doneLoading(String A) {
setState(() {
position = 0;
});
}
startLoading(String A) {
setState(() {
position = 1;
});
}
//Check Internet Code Starts
//Check Internet Code Ended here
@override
Widget build(BuildContext context) {
return Scaffold(
//appBar: AppBar(title: Text('Show ProgressBar While Loading Webview')),
appBar: PreferredSize(
child: Container(),
preferredSize: Size.fromHeight(0.0),
),
body: IndexedStack(index: position, children: <Widget>[
WebView(
initialUrl: 'http://110.38.4.4/login/client',
javascriptMode: JavascriptMode.unrestricted,
key: key,
onPageFinished: doneLoading,
onPageStarted: startLoading,
),
Container(
color: Colors.white,
child: Center(
child: CircularProgressIndicator(
valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
)),
),
]));
}
}

现在我需要的是显示进度指标立即为每一个动作，如果用户在填写登录凭据后单击登录按钮，我希望在单击按钮后立即显示进度指标，而现在进度指标显示在按钮单击几分钟后。我怎么才能做到这样呢?

Answer 1

您可以在navigationDelegate中添加触发进度指示器的代码:

WebView(
initialUrl: 'https://flutter.dev',
navigationDelegate: (NavigationRequest request) {
print('Navigating to ${request.url}');
// Call any code here that you want
return NavigationDecision.navigate;
},
),

Answer 2

基于Soares建议的navigationDelegate，这是我的完整工作代码

class _WikipediaExplorerState extends State<WikipediaExplorer> {
Completer<WebViewController> _controller = Completer<WebViewController>();
final Set<String> _favorites = Set<String>();
String title, url;
bool isLoading = true;
final _key = UniqueKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Facebook Test Webview'),
// This drop down menu demonstrates that Flutter widgets can be shown over the web view.
actions: <Widget>[
NavigationControls(_controller.future),
Menu(_controller.future, () => _favorites),
],
),
body: Builder(builder: (BuildContext context) {
return Stack(
children: <Widget>[
WebView(
initialUrl: 'https://www.facebook.com/',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
// TODO(iskakaushik): Remove this when collection literals makes it to stable.
// ignore: prefer_collection_literals
javascriptChannels: <JavascriptChannel>[
_toasterJavascriptChannel(context),
].toSet(),
navigationDelegate: (NavigationRequest request) {
if (request.url.startsWith('https://www.youtube.com/')) {
print('blocking navigation to $request}');
return NavigationDecision.prevent;
}
print('allowing navigation to $request');
setState(() {
isLoading = true;
});
return NavigationDecision.navigate;
},
onPageFinished: (String url) {
print('Page finished loading: $url');
setState(() {
isLoading = false;
});
},
),
isLoading
? Center(
child: CircularProgressIndicator(),
)
: Stack(),
],
);
}),
);
}
}

每当在应用程序中点击一个新链接时，将启动一个循环进度对话框