Flutter实现webview与原生组件组合滑动的示例代码
最近在用Flutter写一个新闻客户端, 新闻详情页中的内容 需要用Flutter的本地Widget和WebView共同展示 . 比如标题/上方的视频播放器是用本地Widget展示, 新闻内容的富文本文字使用webview展示html, 这样就要求标题/视频播放器与webview可以 组合滑动 .
ps: 如果把新闻详情页都用html画出, 就不用考虑组合滑动的问题.
找到支持与本地组件共存的webview控件
找一个可以与本地组件共存的webview控件是首要任务, 以下是我测试过的几个库:
- flutter_WebView_plugin : 不可以inline;
- webView_flutter : 可能支持, 但是还没有发布;
- flutter_inappbrowser : 可以实现组合布局, 所以选用了此库, 链接 https://github.com/pichillilorenzo/flutter_inappbrowser
另外, 如果仅是展示html静态页面, 可以尝试以下几个库, 不用看我这个麻烦的解决办法了:
html
flutter_html
flutter_html_view
初步实现组合布局
选定 flutter_inappbrowser 后开始实现, 初步代码如下:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
Text('Title'),
Expanded( // 注意必须加这个, 否则webview没有高度
child: InAppWebView(initialUrl: 'https://juejin.im/timeline'),
),
],
),
);
}
这样会构建一个text和webview组合的界面, 不过这里webview自带滚动条, 滚动时是不带着title一块的. 尝试以下两种办法
包裹 SingleChildScrollView : 界面会消失不见, 因为Scrollview根据子布局处理高度, 而Expanded又要根据父布局处理高度, 所以互相依赖导致整个页面无法绘制.
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Text('Title'),
Expanded(
child: InAppWebView(initialUrl: 'https://juejin.im/timeline'),
),
],
),
),
包裹 SingleChildScrollView , 去掉 Expanded : AppBar可以显示了, 但是 InAppWebView 没有高度了.
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Text('Title'),
InAppWebView(initialUrl: 'https://juejin.im/timeline'),
],
),
),
这两种方式都不行, 归根到底是不知道 InAppWebView 的高度, 所以才需要使用与 SingleChildScrollView 相冲突的 Expanded , 所以这个问题变为了 如何获取WebView的高度 .
获取WebView的高度
在android中不会有这个破问题, 给 webview 设置 wrap_content 就可以了, 但是在Flutter中我没有找到类似布局方式. (有大哥知道的话麻烦告诉我一下下啊)
其他尝试的方法就不说了, 最后我采用的办法是: 通过JS注入拿到html内容的高度回调 . 实现方法如下:
class TestState extends State<Test> {
InAppWebViewController _controller;
double _htmlHeight = 200; // 目的是在回调完成直接先展示出200高度的内容, 提高用户体验
static const String HANDLER_NAME = 'InAppWebView';
@override
void dispose() {
super.dispose();
_controller?.removeJavaScriptHandler(HANDLER_NAME, 0);
_controller = null;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Text('Title'),
Container( // 使用可提供高度的Container包裹WebView, 设置为回调的高度
height: _htmlHeight,
child: InAppWebView(
initialUrl: 'https://juejin.im/timeline',
onWebViewCreated: (InAppWebViewController controller) {
_controller = controller;
_setJSHandler(_controller); // 设置js方法回掉, 拿到高度
},
onLoadStop: (InAppWebViewController controller, String url) {
// 页面加载完成后注入js方法, 获取页面总高度
controller.injectScriptCode("""
window.flutter_inappbrowser.callHandler('InAppWebView', document.body.scrollHeight));
""");
},
),
)
],
),
),
);
}
void _setJSHandler(InAppWebViewController controller) {
JavaScriptHandlerCallback callback = (List<dynamic> arguments) async {
// 解析argument, 获取到高度, 直接设置即可(iphone手机需要+20高度)
double height = HtmlUtils.getHeight(arguments);
if (height > 0) {
setState(() {
_htmlHeight = height;
});
}
};
controller.addJavaScriptHandler(HANDLER_NAME, callback);
}
}
以上方法可以精确获取到webview高度, 实现webview与本地Widget组合滑动的要求.
Android端一个问题
以上方法实现后我是一阵窃喜, 赶忙测试了一下, 结果发现一个严重问题: Android端给webview设置超出5500左右的高度时, App会闪退 . 闪退时AndroidStudio不会展示错误日志, 通过 flutter run --verbose 命令运行可以获取到错误信息, 大体看了下是Flutter渲染的问题, 先反馈给官方以及 flutter_inappbrowser 作者了.
然后自己简单测试发现, 给Column的child添加了多个webview没什么问题, 哪怕这几个webview的内容相加绝对超出了5500高度. 所以有了思路: 切分html, 分为多个webview共同展示, 然后分别注入JS获取高度 .
注意!注意! 我们的使用场景是: 要展示的内容 = assets存储的html外壳 + 接口获取到的新闻内容段落, 而不是一个url . 以上解决思路仅适用于加载html的场景, 而不是url.
这个思路的核心在于如何切分html内容, 需要保证切分后的html是标签闭合的, 即不是切在了某标签内部. 使用此切分方案的前提是: body内部的html标签不会有超大范围的div包裹, 否则单个标签内容就超过高度了. 可用的html示例:
<html>
<head></head>
<body>
<!-- 并列小组合, 没有超大范围的div等标签的包裹 -->
<p style.. > asdasdasd </p>
<div style.. >
<img ... />
<p> ... </p>
</div>
<p> asdasdas </p>
</body>
</html>
下面是我实现的切分html的算法:
// 剪切过长的html, 考虑到较差机型以及其他误差, 定为4000
// @params htmlString 待切分的html
// @params totalHeight 前面webview回调出的总高度
// @return String 剪切后的html
static List<String> cutHtml(String htmlString, double totalHeight) {
htmlString = _getBody(htmlString);
List<String> htmlList = List();
if (Platform.isAndroid && totalHeight > 4000) {
// 切为几段('~/'整除, /.toInt)
int childNum = totalHeight ~/ 4000 + (totalHeight % 4000 == 0 ? 0 : 1);
// 每段html的长度
int childLength = htmlString.length ~/ childNum;
// 切一刀后的两段html
String resultHtml = '', remainHtml = htmlString;
int labelStack = 0;
while (childNum > 0 && remainHtml.length > 0) {
if (childLength < remainHtml.length) {
resultHtml = remainHtml.substring(0, childLength);
remainHtml = remainHtml.substring(childLength);
} else {
resultHtml = remainHtml;
remainHtml = '';
}
if (_checkComplete(resultHtml, labelStack)) {
htmlList.add(resultHtml);
childNum--;
} else {
// 如果不是闭合的, 把remain里的n个标签尾之前的内容剪切到result中
while (labelStack != 0) {
int tailPosition = remainHtml.indexOf(_labelsTail);
if (tailPosition != -1) {
resultHtml = resultHtml + remainHtml.substring(0, tailPosition + 2);
remainHtml = remainHtml.substring(tailPosition + 2);
labelStack--;
}
}
htmlList.add(resultHtml);
childNum--;
}
}
} else {
htmlList.add(htmlString);
}
return htmlList;
}
// true if resultHtml是标签闭合的
static bool _checkComplete(String resultHtml, int labelStack) {
labelStack = 0;
for (int i = 0; i < resultHtml.length; i++) {
if (resultHtml.startsWith('<', i)) {
String label = _startWithLabel(resultHtml.substring(i));
if (label != null) {
labelStack++;
i += label.length - 1;
}
}
if (resultHtml.startsWith(_labelsTail, i)) {
labelStack--;
i += _labelsTail.length - 1;
}
}
return labelStack == 0;
}
// 以_labelsHead内的字符串开头
static String _startWithLabel(String resultHtml) {
for (String label in _labelsHead) {
if (resultHtml.startsWith(label)) {
return label;
}
}
return null;
}
// 去除body及以外的标签, 露出并列的子标签
// <html>
// <head></head>
// <body>
// ...
// </body>
// </html>
static String _getBody(String htmlString) {
if (htmlString.contains('<body>')) {
htmlString = htmlString.substring(htmlString.indexOf('<body>') + 6);
htmlString = htmlString.substring(0, htmlString.indexOf('</body>'));
}
return htmlString;
}
// 待检测的标签
static final _labelsHead = {'<div', '<img', '<p', '<strong', '<span'};
static final _labelsTail = '</';
通过以上算法, 拿到了切分好的htmlList, 然后在PageState中使用多个webview分别加载, 分别注入js即可解决此问题.
大功告成!
附:
flutter_inappbrowser 如何加载html字符串:
InAppWebView( initialData: InAppWebViewInitialData(' htmlContent '))
解析asset文件为字符串:
static Future<String> decodeStringFromAssets(String path) async {
ByteData byteData = await PlatformAssetBundle().load(path);
String htmlString = String.fromCharCodes(byteData.buffer.asUint8List());
return htmlString;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Flutter实现文本组件、图标及按钮组件的代码
•文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认值 说明 data String 要显示的文本 maxLines int 0 文本要显示的最大行数 style TextStyle null 文本样式,可定义文本的字体大小.颜色.粗细等 textAlign TextAlign TextAlign.center 文本水平方向的对齐方式,取值有center.end.justify.left.right.start.val
-
flutter 输入框组件TextField的实现代码
TextField 顾名思义文本输入框,类似于iOS中的UITextField和Android中的EditText和Web中的TextInput.主要是为用户提供输入文本提供方便.相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下Flutter中TextField的用法. 以下内容已更新到 github TextField的构造方法: const TextField({ Key key, this.controller, //控制器,控制TextField文字 thi
-
Flutter实现容器组件、图片组件 的代码
•容器组件 容器组件(Container)可以理解为在Android中的RelativeLayout或LinearLayout等,在其中你可以放置你想布局的元素控件,从而形成最终你想要的页面布局.当然Flutter中的容器组件作为一个"容器",肯定会有一些给我们提供一些属性来约束我们容器内的组件,下面介绍一下容器组件(Container)的一些常用属性及描述: 属性名 类型 说明 key Key Container唯一标识符,用于查找更新 alignment AlignmentGeom
-
Flutter实战之自定义日志打印组件详解
在Flutter中,如果我们需要打印日志,如果不进行自定义,我们只能使用自带的 print() 或者 debugPrint() 方法进行打印,但是这两种打印,日志都是默认 Info 层级的日志,很不友好,所以如果需要日志打印层级分明,我们就需要自定义一个日志打印组件,以下就来介绍如何自定义日志打印组件. 如何让输出的日志层级分明? 换种方式想,如果我们能在Flutter代码中,能够调用到原始Android中的Log组件,岂不是就能解决日志打印问题? 如何进行关联 在Flutter中,可以使用 M
-
Flutter实现webview与原生组件组合滑动的示例代码
最近在用Flutter写一个新闻客户端, 新闻详情页中的内容 需要用Flutter的本地Widget和WebView共同展示 . 比如标题/上方的视频播放器是用本地Widget展示, 新闻内容的富文本文字使用webview展示html, 这样就要求标题/视频播放器与webview可以 组合滑动 . ps: 如果把新闻详情页都用html画出, 就不用考虑组合滑动的问题. 找到支持与本地组件共存的webview控件 找一个可以与本地组件共存的webview控件是首要任务, 以下是我测试过的几个库:
-
Flutter仿微信通讯录实现自定义导航条的示例代码
某些页面比如我们在选择联系人或者某个城市的时候需要快速定位到我们需要的选项,一般都会需要像微信通讯录右边有一个导航条一样的功能,由A到Z进行快速定位,本篇文章我们将自己来实现一个跟微信通讯录同样的功能. 关键点:手势定位滑动.列表定位.手势.列表联动. 准备数据,首先我们需要准备导航目录数据, List<String> _az = [ "☆", "A", "B", "C", "D", "
-
vue父子组件的嵌套的示例代码
本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件: var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ t
-
基于PHP实现原生增删改查的示例代码
目录 一.代码 1.sql 2.列表页(index.php) 3.delete.php 4.update.php 5.create.php 二.效果图 一.代码 1.sql -- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: 2022-03-19 19:16:40 -- 服务器版本:10.1.13-MariaDB -- PHP
-
Flutter中获取屏幕及Widget的宽高示例代码
前言 我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情,在 Flutter 中,我们有两种方法来获取 widget 的宽高. MediaQuery 一般情况下,我们会使用如下方式去获取 widget 的宽高: final size =MediaQuery.of(context).size; final width =size.width; final height =size.height; 但是如果不注意,这种写法很容易报错,例如下面的写法就会报错: impor
-
利用原生JS实现data方法示例代码
前言 在开发中经常会在DOM上存储一些自定义数据,我们可以通过setAttribute方法来实现.但是当数据为引用类型时,存储后的数据却无效.这里将用原生的JS对data方法进行实现. 使用setAttribute: <div id="test-data"></div> <p class="test-data-list"></p> <p class="test-data-list">&l
-
Flutter实现用视频背景的登录页的示例代码
最终效果 项目地址 https://github.com/Tecode/flutter_widget 实现方法 安装插件 安装video_player,我安装的是最新的版本,请根据你自己的flutter版本去安装对应的版本,安卓可以直接使用虚拟机,IOS需要真机才可以播放. dev_dependencies: flutter_test: sdk: flutter video_player: ^0.10.1+6 我的Flutter版本 Flutter 1.7.8+hotfix.4 • channe
-
Redux实现组合计数器的示例代码
Redux是一种解决数据共享的方案 import {createStore} from 'redux'; import React from 'react'; import ReactDOM from 'react-dom'; import {connect, createProvider} from 'react-redux' // data let allNum = {num :1000} // 创建reducer, 名字的默认值为 function reducer(state, actio
-
Vue简易版无限加载组件实现原理与示例代码
目录 背景 实现功能 Props 使用 组件实现 scroll 事件 $emit 发射事件和 props 回调函数的区别 总结 背景 遇到的两个问题:scroll 事件不触发.如何将 loading 状态放在无限加载组件中进行管理. 无限加载组件在展示列表页数据时比较常见.特别是在 H5 列表页中,数据比较多,需要做分页,无限加载组件就是一个非常好的选择. 当列表页数据比较多时,一次性从服务端拿到所有的数据会比较耗时,长时间不展示列表数据,比较影响用户体验.所以对于一般的长列表数据,都会做分页.
-
Vue组件之Tooltip的示例代码
前言 本文主要Alert 组件的大致框架, 提供少量可配置选项. 旨在大致提供思路 tooltip 常用于展示鼠标 hover 时的提示信息. 模板结构 <template> <div style="position:relative;"> <span ref="trigger"> <slot> </slot> </span> <div class="tooltip"