使用的是官方 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);
  }
}

欢迎留言>_<

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据