Nealyang/PersonalBlog

webView for Detail

Nealyang opened this issue · 5 comments

前言

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

flutter_webview_plugin

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

webView

使用起来非常的简单,直接可以看 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就更有点模样出来啦。

2detail

更新

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

总结

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

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

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

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

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

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

就是ui看起来很奇怪

依赖报错