webView for Detail

[Nealyang]

前言

鉴于首页功能都已经完成了 80% 了，所以我们在这就先把detail页面写完了吧，这里detail页面我们主要采用webView的形式加载。

flutter_webview_plugin

同样的，我们在 flutter package 中搜索一个webView的package,这里，当然我们要选择“star”数最多的啦

使用起来非常的简单，直接可以看 flutter_webView_plugin 的文档即可。

通过文档我们可以看到此webView具有的一些功能

  Future<Null> launch(String url,
           {Map<String, String> headers: null,
           bool withJavascript: true,
           bool clearCache: false,
           bool clearCookies: false,
           bool hidden: false,
           bool enableAppScheme: true,
           Rect rect: null,
           String userAgent: null,
           bool withZoom: false,
           bool withLocalStorage: true,
           bool scrollBar: true});

甚至类似Flutter中的Scaffold都是有的，这也正式我们需要的。

webView for detail

下面让我们重新编写我们的detail页面

首先在 pubspec.yaml 中注入我们需要的依赖这个不必多说。

• lib/pages/article_detail.dart

      import 'package:flutter/material.dart';
      import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
      
      class ArticleDetail extends StatefulWidget {
        final String articleUrl;
        final String title;
        ArticleDetail(this.articleUrl, this.title);
        _ArticleDetailState createState() => _ArticleDetailState();
      }
      
      class _ArticleDetailState extends State<ArticleDetail> {
        bool hasLoaded = false;
        final flutterWebViewPlugin = new FlutterWebviewPlugin();
      
        @override
        void initState() {
          flutterWebViewPlugin.onStateChanged.listen((state) {
            if (state.type == WebViewState.finishLoad) {//有掘金web版本详情页的finished触发时间实在太长，所以这里就省略了hasLoaded的处理,其实也就是为了界面更友好
              setState(() {
                hasLoaded = true;
              });
            }
          });
          super.initState();
        }
      
        @override
        Widget build(BuildContext context) {
          return WebviewScaffold(
            url: widget.articleUrl,
            appBar: AppBar(
              title: Text(widget.title),
            ),
            withZoom: false,
            withLocalStorage: true,
            withJavascript: true,
          );
        }
      }
      

这里的代码说明下为什么是 StateFulWidget ，以为加载页面是需要时间的，所以我希望在加载的过程中有一个loading，而不是如果时间过长的话给用户的感觉是白板。当然，flutter_webView_plugin 也给我们提供了这方面的监听，但是！！！ 咳咳，掘金的 detail 页面 貌似有些资源记载。。。恩，忒慢！ 所以 WebViewState.finishLoad 触发非常非常非常慢，所以这里，我就没有用这个 state 去做什么事情了，但是这个口子，还是留下来了。 大家自己开发的时候还是需要的。

这一小节比较简单，现在我们的app就更有点模样出来啦。

更新

2018-12-05 Flutter更新到1.0后，flutter_webview_plugin会导致应用崩溃。目前需更新到^0.3.0+2版本

总结

截止目前，首页的功能编写就要告一段落了。 至此，你应该学会

• flutter package 中查找需要的package
• 学习如何使用package
• webView的使用
• article detail的编写

[kennthsHG]

这返回或者侧滑返回 当前webview不会跟随消失 有什么办法吗

[Nealyang]

这返回或者侧滑返回 当前webview不会跟随消失 有什么办法吗

webView 不会消失是什么意思？页面不是退出了么

[kennthsHG]

就是ios侧滑返回 顶部导航栏向右滑 可是当前的webview还在当前

[kennthsHG]

就是ui看起来很奇怪

[mm46468648]

依赖报错