使用的是官方 webview_flutter
库,感觉 flutter 的 webview 挺多坑的,所以记录一下。
路由切换卡顿
问题:使用 Navigator.of(context).push(...)
路由切换到一个含有 webview 的 page 时,首次渲染会卡顿,这是因为 WebView 第一次构造的时候很慢导致的(也就是看不到了路由切换动画)
一种临时解决方案,在切换动画加载完毕后,再去构造 WebView,这样从用户角度上看,就不会有路由切换动画的卡顿了。
class WebViewPage extends StatefulWidget {
final String uri;
WebViewPage({
@required this.uri,
}) : assert(uri != null);
@override
_WebViewPageState createState() => _WebViewPageState();
}
class _WebViewPageState extends State<WebViewPage> {
WebViewController _controller;
bool _animationCompleted = false;
@override
Widget build(BuildContext context) {
// 主要是下面的代码
var route = ModalRoute.of(context);
if (route != null && !_animationCompleted) {
void handler(status) {
if (status == AnimationStatus.completed) {
route.animation.removeStatusListener(handler);
setState(() {
_animationCompleted = true;
});
}
}
route.animation.addStatusListener(handler);
}
return Scaffold(
title: widget.title,
backgroundColor: Colors.white,
body: _animationCompleted
? WebView(
initialUrl: 'about:blank',
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
_loadHtmlFromAssets();
},
)
: Container(),
);
}
_loadHtmlFromAssets() async {
var uri = Uri.dataFromString(
await rootBundle.loadString(widget.uri),
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8'),
).toString();
_controller.loadUrl(uri);
}
}