Open Nealyang opened 5 years ago
鉴于首页功能都已经完成了 80% 了,所以我们在这就先把detail页面写完了吧,这里detail页面我们主要采用webView的形式加载。
同样的,我们在 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都是有的,这也正式我们需要的。
下面让我们重新编写我们的detail页面
首先在 pubspec.yaml 中注入我们需要的依赖这个不必多说。
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 去做什么事情了,但是这个口子,还是留下来了。 大家自己开发的时候还是需要的。
WebViewState.finishLoad
这一小节比较简单,现在我们的app就更有点模样出来啦。
2018-12-05 Flutter更新到1.0后,flutter_webview_plugin会导致应用崩溃。目前需更新到^0.3.0+2版本
^0.3.0+2
截止目前,首页的功能编写就要告一段落了。 至此,你应该学会
这返回或者侧滑返回 当前webview不会跟随消失 有什么办法吗
webView 不会消失是什么意思?页面不是退出了么
就是ios侧滑返回 顶部导航栏向右滑 可是当前的webview还在当前
就是ui看起来很奇怪
依赖报错
前言
鉴于首页功能都已经完成了 80% 了,所以我们在这就先把detail页面写完了吧,这里detail页面我们主要采用webView的形式加载。
flutter_webview_plugin
同样的,我们在 flutter package 中搜索一个webView的package,这里,当然我们要选择“star”数最多的啦
使用起来非常的简单,直接可以看 flutter_webView_plugin 的文档即可。
通过文档我们可以看到此webView具有的一些功能
甚至类似Flutter中的Scaffold都是有的,这也正式我们需要的。
webView for detail
下面让我们重新编写我们的detail页面
首先在 pubspec.yaml 中注入我们需要的依赖这个不必多说。
这里的代码说明下为什么是 StateFulWidget ,以为加载页面是需要时间的,所以我希望在加载的过程中有一个loading,而不是如果时间过长的话给用户的感觉是白板。当然,flutter_webView_plugin 也给我们提供了这方面的监听,但是!!! 咳咳,掘金的 detail 页面 貌似有些资源记载。。。恩,忒慢! 所以
WebViewState.finishLoad
触发非常非常非常慢,所以这里,我就没有用这个 state 去做什么事情了,但是这个口子,还是留下来了。 大家自己开发的时候还是需要的。这一小节比较简单,现在我们的app就更有点模样出来啦。
更新
2018-12-05 Flutter更新到1.0后,flutter_webview_plugin会导致应用崩溃。目前需更新到
^0.3.0+2
版本总结
截止目前,首页的功能编写就要告一段落了。 至此,你应该学会