校园 网站建设 知乎,网站建设百度资源,自助建站软件排行榜,邢台制作大家好#xff0c;我是 17。
Flutter WebView 一共写了四篇文章
在 Flutter 中使用 webview_flutter 4.0 | 基础用法与事件处理在 Flutter 中使用 webview_flutter 4.0 | js 交互Flutter WebView 性能优化#xff0c;让 h5 像原生页面一样优秀#xff0c;已入选 掘金一周 …
大家好我是 17。
Flutter WebView 一共写了四篇文章
在 Flutter 中使用 webview_flutter 4.0 | 基础用法与事件处理在 Flutter 中使用 webview_flutter 4.0 | js 交互Flutter WebView 性能优化让 h5 像原生页面一样优秀已入选 掘金一周 2023.02.22 期Flutter WebView 如何与 h5 同步登录状态 已入选 CSDN每天值得看–2023-02-21
本文是第 1 篇定位是新手入门介绍和演示 webview 的基础用法。最后还介绍了事件处理的技巧。
环境准备已经在 在 Flutter 中使用 webview_flutter 4.0 | js 交互 说过了不再赘述。既然是新手入门就会本着详尽的原则而且会多配示例。
获取页面信息
获取页面 title
核心方法controller.getTitle
完整示例放在 main.dart 就能运行。运行示例点击获取 title 的按钮会在控制台显示CSDN - 专业开发者社区
使用 WebView_flutter 4.0 主要分三步
声明 WebViewController在 initState 中初始化 controller把 controller 赋值给 WebViewWidgetWebViewWidget 显示页面。
import package:flutter/material.dart;
import package:webview_flutter/webview_flutter.dart;void main() {runApp(const MyApp());
}class MyApp extends StatefulWidget {const MyApp({super.key});overrideStateMyApp createState() _MyAppState();
}class _MyAppState extends StateMyApp {// 1late WebViewController controller;overridevoid initState() {// 2controller WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted)..loadRequest(Uri.parse(https://www.csdn.net/));super.initState();}overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: Column(children: [// 3Expanded(child: WebViewWidget(controller: controller))],),floatingActionButton: ElevatedButton(onPressed: () async {var title await controller.getTitle();print(title);},child: Text(获取 title),)));}
}页面信息相关的还有另外三个方法
currentUrl 获取页面的 urlreload 重新加载当前 urlsetUserAgent 设置页面 userAgent
userAgent 用来标识身份。具体怎么写自己定但要有一个特殊的标识用作区分。比如微信的标识是 MicroMessenger。
滚动页面
scrollBy 相对原位置滚动scrollTo 滚动到绝对位置
比如现在滚动位置在 0 0scrollBy(0,100) 执行一次向下滚动 100执行两次向下滚动 200。scrollTo(0,100) 执行一次向下滚动 100执行两次不动还是在 0 100 的位置。
用 getScrollPosition 可以获得页面当前滚动位置。
这三个都是 controller 的方法和前面提到的 controller.getTitle 的用法是一样的。
虽然 controller 给出了三个方法但还是略显不够。比如我想让页面向上滚动一半怎么办还是得靠万能的 js 先获取页面的高度。
floatingActionButton: ElevatedButton(onPressed: () async {var height await controller.runJavaScriptReturningResult(document.scrollingElement.scrollHeight) as int;var scrollTo height ~/ 2;controller.scrollTo(0, scrollTo);},child: Text(滚动一半内容),)));当然了可能无滚动真正滚动一半内容这个示例只是为了说明用 controller 的方法不能完成滚动任务时可以用万能的 js。
WebView 的导航
canGoForwardcanGoBackgoForwardgoBack
前两个判断是否能前进与后退后两个执行前进与后退。还是比较简单的。这四个都是 controller 上的方法看名字就知道含意了。
页面来源
通过 url 获取页面
最简单的情况只提供 URI 就行了。
var controller WebViewController();
loadRequest(Uri.parse(https://www.csdn.net/);可能你还想加上自定义 header用来提供额外的信息。header 的格式
{key1:value1,key2:value2,
}key 要如何写呢最初推荐自定义headers 以 X- 开头但是这种用法被 IETF 在 2012 年 6 月发布的 RFC 6648 明确弃用原因是其会在非标准字段成为标准时造成不便。所以对于自定义 header 的key直接命名就行。key 不区分大小写。 如果是多个词中间用连字符隔开。
controller.loadRequest(Uri.parse(https://www.csdn.net/),headers: {Custom-Name:IAM17
});如果内容过多需要通过 body 发送。但一看 body 的参数类型傻眼了是 Uint8List这是什么鬼
Uint8List 是 8 位无符号整数的固定长度列表。对于长列表此实现比默认的 List 实现更节省空间和时间。我们理解成用 Uint8List 更高效就行了。那么如何把 String 转成 Uint8List 呢
分两步
把 String 转成 Listint把 Listint 转成 unit8List
import dart:typed_data;
Uint8List toUint8List(String str) {final Listint codeUnits str.codeUnits;final unit8List Uint8List.fromList(codeUnits);return unit8List;
}我们综合起来把参数都用上。注意当 body 不为空的时候method 必须为 LoadRequestMethod.post。
controller.loadRequest(Uri.parse(https://www.csdn.net/),headers: {Custom-Name: IAM17,},method: LoadRequestMethod.post,body: toUint8List(我们见过的));如果想要测试可以把域名换成你自己的域名。在服务端就可以收到 header “Custom-Name”: “IAM17” 和 body “我们见过的”
直接把 String 作为页面内容 controller.loadHtmlString(a href/frontend打开前端页面/a, baseUrl: https://www.csdn.net);用 baseUrl 参数html 中的链接就可以只写 path 的部分。
示例中的代码虽然也能运行但还是建议要写完整的 html。
html 内容存在文件中
import dart:io;var documentDirectory await getApplicationDocumentsDirectory();
var filePath ${documentDirectory.path}/index.html;
var indexFile File(filePath);
await indexFile.writeAsString(IAM17);controller.loadFile(filePath);前面四句是在准备文件示例只写入了 ‘IAM17’实际上应该写入完整的 html 内容。运行示例能看到字可能很小说明运行成功。
html 内容在 Asset 中
实际上 Asset 这种方式也是把内容保存在文件中 与 loadFile 不同的是 Asset 文件是随代码一起打包发布的。
我们来演练一下。
准备 Asset 文件。
在项目根目录下建立文件夹 html在 html 下建立 index.html 文件文件里放如下内容
!DOCTYPE html
head
titlewebview asset demo | IAM17/title
meta charsetUTF-8/
meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno,viewport-fitcover /
style
body{background:#BBDFFC; text-align:center;color:#C45F84;padding-top:20px;font-size:22px;
}
/style
/head
html
body
大家好我是 17
/body
/html注册 Asset
打开 pubspec.yaml 增加下面的内容 assets:- html/运行代码 controller.loadFlutterAsset(html/index.html);会看到下面的效果 使用 NavigationDelegate
NavigationDelegate 可以拦截页面请求以及跟踪导航请求的进度。
拦截
虽然前面的文章已经讲过拦截了但因为这个内容比较重要也是为了内容完整这里再说一下。 controller..setNavigationDelegate(NavigationDelegate(onNavigationRequest: (request) {if (request.url.endsWith(/a.html)) {scheduleMicrotask(() controller.loadRequest(Uri.parse(http://localhost:8080/b.html));return NavigationDecision.prevent;}return NavigationDecision.navigate;},))..loadRequest(Uri.parse(http://localhost:8080));逻辑上还是很简单的根据 url 判断是否需要拦截。对需要拦截的 url 阻止本次请求。可以发起新的请求也可以什么都不做。
页面加载完成
页面加载完成后可以在这里运行 js比如可以在这里拿到 cookie。
NavigationDelegate(onPageFinished: (url) async {var cookie await controller.runJavaScriptReturningResult(document.cookie) as String;print(cookie);
})如果你不需要拿到 js 的运行结果可以用 controller.runJavaScript。
有的页面资源很多加载需要时间可以用 NavigationDelegate 下面的 onProgress 回调做页面加载动画。
事件处理
在 ListView 中响应手势
默认情况下WebViewWidget 在 listView 中是无法响应上下滑动的手势的。为了让 WebViewWidget 可以滑动查看 WebView 中的更多内容需要指定 gestureRecognizers 属性。
ListView(children: [SizedBox(height: 600,child: WebViewWidget(gestureRecognizers: {FactoryVerticalDragGestureRecognizer(() {return VerticalDragGestureRecognizer()..onStart (DragStartDetails details) {print(start);}..onDown (DragDownDetails details) {print(down: $details);};})}, controller: controller),)],
);看下 gestureRecognizers 属性的类型 SetFactoryOneSequenceGestureRecognizer 可能会吓到一些小伙伴我们一层一层拆解其实也是很简单的。
最外层一个是 Set是为了容纳多个手势每种类型的手势只能有一个。
这里的 Factory 不同于构造函数那块使用的 factory注意 f 是小写的)。构造函数前面的 factory 是一个关键字这里的 Factory 是一个类。
class FactoryT {const Factory(this.constructor) : assert(constructor ! null);final ValueGetterT constructor;Type get type T;overrideString toString() {return Factory(type: $type);}
}关键在于 constructorconstructor 是 ValueGetterT 类型ValueGetterT 是 T Function() 的函数签名。回到 Factory 的构造函数Factory 需要一个参数参数的类型是 T Function()。这样就很明了了。现在 T 是 OneSequenceGestureRecognizer new 一个 Factory 类的实例可以这样写
FactoryVerticalDragGestureRecognizer(() VerticalDragGestureRecognizer());VerticalDragGestureRecognizer 是 OneSequenceGestureRecognizer 的子类。 当然了这样写也是一样的。
FactoryVerticalDragGestureRecognizer(() {return VerticalDragGestureRecognizer();
});把它放到 Set 里就成了
{FactoryVerticalDragGestureRecognizer(() {return VerticalDragGestureRecognizer();})
}可以对 VerticalDragGestureRecognizer 进行一些初始化化的操作。
{FactoryVerticalDragGestureRecognizer(() {var recognizer VerticalDragGestureRecognizer();recognizer.onStart (DragStartDetails details) {print(start);};recognizer.onDown (DragDownDetails details) {print(down: $details);};return recognizer;})}级联 ( … ) 允许您对同一对象进行一系列操作。除了访问实例成员之外您还可以在同一个对象上调用实例方法。这通常可以节省您创建临时变量的步骤并允许您编写更流畅的代码。
本例中我们对 recognizer 连续进行了属性赋值可以用级联简化代码省掉中间变量 recognizer。 {FactoryVerticalDragGestureRecognizer(() {return VerticalDragGestureRecognizer()..onStart (DragStartDetails details) {print(start);}..onDown (DragDownDetails details) {print(down: $details);};})}在其它滚动 widget 中也可以同样的方式让 webview 响应手势。 当有 widget 遮盖住 VebView如何让事件穿透
这部分是附加的跳过不会影响 WebView 的使用。
有时候需要在 WebView 上浮动一些自己的 widget。在 Stack 中把这些 widget 放在 WebView 的后面就可以了效果上 这些 widget 覆盖在 WebView 的上面。
在下面的示例中是一个半透明的绿色方块。点击这个绿色方块的时候事件是不能穿透到 WebView 上面的。现在的需求是想让事件穿透到 WebView 上。
MaterialApp(home: Scaffold(body: SafeArea(child: Stack(children: [WebViewWidget(controller: controller),Positioned(top: 100,left: 0,right:0,child: Container(color: Color.fromRGBO(0, 250, 0, .3), height: 300,)),],)实现在的方案也是很简单的用 IgnorePointer 把 container 包起来就行了。 Stack(children: [WebViewWidget(controller: controller),Positioned(top: 100,left: 0,right: 0,child: IgnorePointer(child: Container(color: Color.fromRGBO(0, 250, 0, .3),height: 300,))),],)原理解析
简单来说一个 Widget 要响应事件需要先通过 HitTest。一个 Widget 有多个 child 的时候只要有一个 child 通过点击测试就可以响应事件。从后向前判断每一个 child 是否通过 HitTest 后面的 child 测试通过就不会再判断前面的 chid。
没有 IgnorePointer 的时候Container HitTest 通过WebViewWidget 没机会参与测试当然也就没机会响应事件了。
加上 IgnorePointer 导致 Container HitTest 不通过接着判断前面的 child WebViewWidgetWebViewWidget HitTest 通过所以可以响应事件了。
关于事件的更多内容请参见
【交互 widget】Flutter Listener【交互 widget】IgnorePointer 与 AbsorbPointer
到这里WebView 的文章就全部结束了。 WebView 方面如果还有哪里没提到的欢迎小伙伴们提出来17 再补充。
番外
上周发了 Flutter WebView 如何与 h5 同步登录状态 后收到系统通知上榜了
CSDN每天值得看–2023-02-21
收到这个通知心中无比喜悦自己的文章得到了官方认可一个多月来写文的疲惫感一扫而空。
发完三篇 WebView 的文章后总感觉有什么东西没提到。一想到下次再写 WebView 不知是何年月我决定立即补上这篇新手入门的文章。
整花了一个月的时间WebView 的文章终于齐整了。 写文花费的精力很大自从节后复工以来17 周末都没出过门一心写文。17 自己都奇怪哪来这么大的劲头原因是 小伙伴们的支持。只要小伙伴们支持我17 就有动力写下去。
