Flutter加載Html并實現與JS 的雙向調用

https://blog.csdn.net/zl18603543572/article/details/96585707

2019-07-20 16:01:01?早起的年輕人?閱讀數 2025??收藏?更多

分類專欄：?flutter??flutter 從入門到精通?

本文鏈接：https://blog.csdn.net/zl18603543572/article/details/96585707

更多文章請查看 flutter從入門到精通

可以用來加載 Html 頁面，以實現 Android 中 WebView 或者是 iOS 中的 UIWebView 中的功能。

Flutter中可用于來加載 Html 頁面的插件 ,

flutter_WebView_plugin

webView_flutter

flutter_inappbrowser

html

flutter_html

flutter_html_view

這些多多少滿足不了我項目中的需求，所以花了幾天時間開發了 Flutter_Fai_Webview 插件，可實現 Android 中 WebView 或者是 iOS 中的 UIWebView 中的功能，因為 Flutter_Fai_Webview 插件本質上是通過 PlatformView 功能將原生的 View 嵌套在 Flutter 中。

插件源碼在這里

開發插件要具備的知識：

Flutter 與原生 Android iOS 雙向通信

Flutter通過MethodChannel實現Flutter 與Android iOS 的雙向通信

Flutter通過BasicMessageChannel實現Flutter 與Android iOS 的雙向通信

Flutter 中內嵌 Android iOS 原生View的編程基礎

flutter調用android 原生TextView?

flutter調用ios 原生View?

最重要的一點是具備 Android iOS 原生語言的開發能力

Flutter_Fai_Webview 插件可實現的功能：

同時適配于 Android Ios 兩個平臺

通過 url 來加載渲染一個Html 頁面

加載 Html 文本數據如?<html> .... </html>等

加載 Html 標簽數據如?? ...

實現 WebView 加載完成后，自動測量 WebView 的高度，并回調 Flutter

實現 WebView 加載完成監聽

實現 WebView 上下滑動、滑動到頂部兼聽、滑動到底部兼聽并回調 Flutter

實現兼聽 WebView 輸出日志并將日志回調 Flutter

實現為 Html 頁面中所有的圖片添加點擊事件并回調 Flutter

實現 Html 中Js 調用 Flutter 頁面功能

實現 Flutter 頁面中觸發 Html 頁面中 Js 方法

本插件開發的過程將在這里詳細論述

也就是說在這里將教會你開發一個 Flutter 插件。

Flutter 加載 HTML 詳細闡述（iOS 端實現）

Flutter 加載 HTML 詳細闡述（Android 端實現）

開始使用

1 基本使用說明

1.1 Flutter 項目中 pubspec.xml 文件中配置插件

? flutter_fai_webview:

? ? git:

? ? ? url: https://github.com/zhaolongs/Flutter_Fai_Webview.git

? ? ? ref: master

1.2 在使用到 WebView 頁面中

引入頭文件

import 'package:flutter_fai_webview/flutter_fai_webview.dart';

1.3 創建 WebView 組件

? ? //使用插件 FaiWebViewWidget

? ? webViewWidget = FaiWebViewWidget(

? ? ? //webview 加載網頁鏈接

? ? ? url: htmlUrl,

? ? ? //webview 加載信息回調

? ? ? callback: callBack,

? ? ? //輸出日志

? ? ? isLog: true,

? ? );

1.4 FaiWebViewWidget 構造參數說明

? FaiWebViewWidget({

? ? //webview 加載網頁鏈接

? ? this.url,

? ? //webview 加載完整的 html 文件數據? 如 <html> .... </html>

? ? // 不完整的 html 文件數據如 配置到此項，用此屬性來加載，只會渲染 ... 中已有的樣式不會適配移動端顯示

? ? this.htmlData,

? ? //webview 加載完整的 html 文件數據或者是不完整的 html 文件數據如

? ? //不完整的 html 文件數據如 配置到此項，會自動將不完整的 html 文件數據添加 <html><head> .. </head> <body> 原來的內容 </body></html>,并適配移動端

? ? this.htmlBlockData,

? ? //輸出 Log 日志功能

? ? this.isLog,

? ? // 為 Html 頁面中所有的圖片添加點擊事件并通過回調通知 Flutter 頁面

? ? // 只有使用 htmlBlockData 屬性加載的頁面才會有此效果

? ? this.htmlImageIsClick = false,

? ? // Html 頁面中圖片點擊回調

? ? this.imageCallBack,

? ? // Html 頁面中所有的消息回調

? ? this.callback,

? });

1.5 原生回調 Flutter 的 callback 以及 Html 頁面中圖片點擊回調說明

? /**

? * code 原生 Android iOS 回調 Flutter 的消息類型標識

? * message 消息類型日志

? * content 回調的基本數據

? */

? Function(int code, String message, dynamic content) callback;

詳細說明

? //當前點擊的圖片 URL

? String imageUrl = null;

? //是否顯示浮動按鈕

? bool isShowFloat = false;

? /**

? * code 當前點擊圖片的位置

? * url 當前點擊圖片對應的鏈接

? * images 當前 Html 頁面中所有的圖片集合

? */

? void imageCallBack(int code, String url, List<String> images) {

? ? imageUrl = url;

? ? setState(() {});

? }

? void callBack(int code, String msg, content) {

? ? String call = "回調 code:" +

? ? ? ? code.toString() +

? ? ? ? " msg:" +

? ? ? ? msg.toString() +

? ? ? ? " content:" +

? ? ? ? content.toString();

? ? if (code == 201) {

? ? ? //加載頁面完成后對頁面重新測量的回調

? ? ? //這里沒有使用到

? ? ? //當FaiWebViewWidget 被嵌套在可滑動的 widget 中，必須設置 FaiWebViewWidget 的高度

? ? ? //設置 FaiWebViewWidget 的高度可通過在 FaiWebViewWidget 嵌套一層 Container 或者 SizeBox

? ? ? webViewHeight = content;

? ? } else if (code == 202) {

? ? ? // Html 頁面中 Js 的回調

? ? ? // Html 頁面中的開發需要使用 Js 調用? 【 Android 中使用 controll.otherJsMethodCall( json )】【iOS中直接調用 otherJsMethodCall( json ) 】

? ? ? // 在 Flutter 中解析 json 然后加載不同的功能

? ? ? String jsJson = content;

? ? } else if (code == 203) {

? ? ? // 為 Html 頁面中的圖片添加點擊事件后，點擊圖片會回調此方法

? ? ? // content 為當前點擊圖片的地址

? ? ? // 實現更多功能比如一個 Html 頁面中有5張圖片，點擊放大查看并可右右滑動

? ? ? // 這個功能可以在 imageCallBack 回調中處理

? ? } else if (code == 301) {

? ? ? //當 WebView 滑動到頂部的回調

? ? } else if (code == 302) {

? ? ? //當 WebView 開始向下滑動時的回調

? ? ? //隱藏按鈕

? ? ? isShowFloat = true;

? ? } else if (code == 303) {

? ? ? //當 WebView 開始向上滑動時的回調

? ? ? //顯示按鈕

? ? ? isShowFloat = false;

? ? } else if (code == 304) {

? ? ? //當 WebView 滑動到底部的回調

? ? } else if (code == 401) {

? ? ? //當 WebView 開始加載的回調

? ? } else if (code == 402) {

? ? ? //當 WebView 加載完成的回調

? ? } else if (code == 403) {

? ? ? // WebView 中 Html中日志輸出回調

? ? } else if (code == 401) {

? ? ? // WebView 加載 Html 頁面出錯的回調

? ? } else if (code == 501) {

? ? ? // 當 Html 頁面中有 Alert 彈框彈出時回調消息

? ? } else if (code == 1000) {

? ? ? // 操作失敗例如空指針異常等等

? ? } else {

? ? ? //其他回調

? ? }

? ? setState(() {

? ? ? message = call;

? ? });

? }

1.6 Flutter 刷新頁面

//調用此方法便可刷新（重新加載頁面）

webViewWidget.refresh();

1.7 Flutter 調用 JS 方法

//testAlert() 就是我們要調用的 Html 頁面中 JS的方法

// testAlert() 可以自定義與 Html 中的 JS 開發約定

webViewWidget.loadJsMethod("testAlert()");

2 Flutter 加載頁面

2.1 通過 url 加載 Html 頁面

import 'package:flutter/material.dart';

import 'package:flutter_fai_webview/flutter_fai_webview.dart';

/**

*? 加載地址

*? 通過 url 加載了一個 Html頁面是取常用的方法

class DefaultLoadingWebViewUrlPage extends StatefulWidget {

? @override

? MaxUrlState createState() => MaxUrlState();

}

class MaxUrlState extends State<DefaultLoadingWebViewUrlPage> {

? //要顯示的頁面內容

? Widget childWidget;

? //加載Html的View

? FaiWebViewWidget webViewWidget;

? //原生發送給 Flutter 的消息

? String message = "--";

? // 頁面

? String htmlUrl = "https://blog.csdn.net/zl18603543572";

? @override

? void initState() {

? ? super.initState();

? ? //使用插件 FaiWebViewWidget

? ? webViewWidget = FaiWebViewWidget(

? ? ? //webview 加載網頁鏈接

? ? ? url: htmlUrl,

? ? ? //webview 加載信息回調

? ? ? callback: callBack,

? ? ? //輸出日志

? ? ? isLog: true,

? ? );

? }

? @override

? Widget build(BuildContext context) {

? ? return Scaffold(

? ? ? ? appBar: AppBar(

? ? ? ? ? leading: IconButton(

? ? ? ? ? ? onPressed: () {

? ? ? ? ? ? ? Navigator.pop(context);

? ? ? ? ? ? },

? ? ? ? ? ? icon: Icon(Icons.arrow_back_ios),

? ? ? ? ? ),

? ? ? ? ? title: Container(

? ? ? ? ? ? padding: EdgeInsets.only(left: 10, right: 10),

? ? ? ? ? ? height: 28,

? ? ? ? ? ? alignment: Alignment(0, 0),

? ? ? ? ? ? color: Color.fromARGB(90, 0, 0, 0),

? ? ? ? ? ? child: Text(

? ? ? ? ? ? ? message,

? ? ? ? ? ? ? style: TextStyle(color: Colors.white, fontSize: 12),

? ? ? ? ? ? ),

? ? ? ? ? ),

? ? ? ? ),

? ? ? ? body: webViewWidget,

? ? ? );

? }

? void callBack(int code, String msg, content) {

? ? //加載頁面完成后對頁面重新測量的回調

? ? //這里沒有使用到

? ? //當FaiWebViewWidget 被嵌套在可滑動的 widget 中，必須設置 FaiWebViewWidget 的高度

? ? //設置 FaiWebViewWidget 的高度可通過在 FaiWebViewWidget 嵌套一層 Container 或者 SizeBox

? ? if (code == 201) {

? ? ? //頁面加載完成后測量的 WebView 高度

? ? ? int webViewHeight = content;

? ? ? print("webViewHeight " + webViewHeight.toString());

? ? } else {

? ? ? //其他回調

? ? }

? ? setState(() {

? ? ? message = "回調：code[" + code.toString() + "]; msg[" + msg.toString() + "]";

? ? });

? }

}

2.2 通過 Html Data 加載 Html 頁面

import 'package:flutter/material.dart';

import 'package:flutter_fai_webview/flutter_fai_webview.dart';

/**

*? 通過 htmlBlockData 加載 Html 數據并添加移動適配

class DefaultHtmlBlockDataPage2 extends StatefulWidget {

? @override

? DefaultHtmlBlockDataPageState createState() =>

? ? ? DefaultHtmlBlockDataPageState();

}

class DefaultHtmlBlockDataPageState extends State<DefaultHtmlBlockDataPage2> {

? FaiWebViewWidget webViewWidget;

? //原生發送給 Flutter 的消息

? String message = "--";

? double webViewHeight = 100;

? //要顯示的頁面內容

? Widget childWidget;

? String htmlBlockData = "<!DOCTYPE html><html> <head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">? <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,maximum-scale=1\"> </head> <body> 生物真題 <img src=\"http://pic.studyyoun.com/1543767087584\" title=\"\" alt=\"\"/><img src=\"http://pic.studyyoun.com/1543767100547\" title=\"\" alt=\"\"/> </body></html>";

? @override

? void initState() {

? ? super.initState();

? ? //使用插件 FaiWebViewWidget

? ? webViewWidget = FaiWebViewWidget(

? ? ? //webview 加載網頁鏈接

? ? ? htmlBlockData: htmlBlockData,

? ? ? //webview 加載信息回調

? ? ? callback: callBack,

? ? ? //輸出日志

? ? ? isLog: true,

? ? );

? }

? @override

? Widget build(BuildContext context) {

? ? return Scaffold(

? ? ? appBar: AppBar(

? ? ? ? leading: IconButton(

? ? ? ? ? onPressed: () {

? ? ? ? ? ? Navigator.pop(context);

? ? ? ? ? },

? ? ? ? ? icon: Icon(Icons.arrow_back_ios),

? ? ? ? ),

? ? ? ? title: Container(

? ? ? ? ? padding: EdgeInsets.only(left: 10, right: 10),

? ? ? ? ? height: 28,

? ? ? ? ? alignment: Alignment(0, 0),

? ? ? ? ? color: Color.fromARGB(90, 0, 0, 0),

? ? ? ? ? child: Text(

? ? ? ? ? ? message,

? ? ? ? ? ? style: TextStyle(color: Colors.white, fontSize: 12),

? ? ? ? ? ),

? ? ? ? ),

? ? ? ),

? ? ? body: Container(child: webViewWidget,),

? ? );

? }

? callBack(int code, String msg, content) {

? ? //加載頁面完成后對頁面重新測量的回調

? ? //這里沒有使用到

? ? //當FaiWebViewWidget 被嵌套在可滑動的 widget 中，必須設置 FaiWebViewWidget 的高度

? ? //設置 FaiWebViewWidget 的高度可通過在 FaiWebViewWidget 嵌套一層 Container 或者 SizeBox

? ? if (code == 201) {

? ? ? webViewHeight = content;

? ? ? print("webViewHeight " + webViewHeight.toString());

? ? } else {

? ? ? //其他回調

? ? }

? ? setState(() {

? ? ? message = "回調：code[" + code.toString() + "]; msg[" + msg.toString() + "]";

? ? });

? }

}

2.3 加載混合頁面

也就是說一個頁面中，一部分是 Flutter Widget 一部分是 webview 加載。

import 'package:flutter/material.dart';

import 'dart:async';

import 'package:flutter_fai_webview/flutter_fai_webview.dart';

/**

*? 混合頁面加載

class DefaultHexRefreshPage extends StatefulWidget {

? @override

? MaxUrlHexRefreshState createState() => MaxUrlHexRefreshState();

}

class MaxUrlHexRefreshState extends State<DefaultHexRefreshPage> {

? FaiWebViewWidget webViewWidget;

? //原生發送給 Flutter 的消息

? String message = "--";

? String htmlUrl = "https://blog.csdn.net/zl18603543572";

? double webViewHeight = 1;

? @override

? void initState() {

? ? super.initState();

? ? //使用插件 FaiWebViewWidget

? ? webViewWidget = FaiWebViewWidget(

? ? ? //webview 加載網頁鏈接

? ? ? url: htmlUrl,

? ? ? //webview 加載信息回調

? ? ? callback: callBack,

? ? ? //輸出日志

? ? ? isLog: true,

? ? );

? }

? @override

? Widget build(BuildContext context) {

? ? return Scaffold(

? ? ? appBar: AppBar(

? ? ? ? leading: IconButton(

? ? ? ? ? onPressed: () {

? ? ? ? ? ? Navigator.pop(context);

? ? ? ? ? },

? ? ? ? ? icon: Icon(Icons.arrow_back_ios),

? ? ? ? ),

? ? ? ? title: Container(

? ? ? ? ? padding: EdgeInsets.only(left: 10, right: 10),

? ? ? ? ? height: 28,

? ? ? ? ? alignment: Alignment(0, 0),

? ? ? ? ? color: Color.fromARGB(90, 0, 0, 0),

? ? ? ? ? child: Text(

? ? ? ? ? ? message,

? ? ? ? ? ? style: TextStyle(color: Colors.white, fontSize: 12),

? ? ? ? ? ),

? ? ? ? ),

? ? ? ),

? ? ? body: buildRefreshHexWidget(),

? ? );

? }

? /**

? * 需要注意的是

? * RefreshIndicator 會覆蓋 WebView 的滑動事件

? * 所有關于監聽 WebView 的滑動監聽將會失效

? */

? Widget buildRefreshHexWidget() {

? ? return RefreshIndicator(

? ? ? //下拉刷新觸發方法

? ? ? onRefresh: _onRefresh,

? ? ? //設置webViewWidget

? ? ? child: SingleChildScrollView(

? ? ? ? child: Column(

? ? ? ? ? children: <Widget>[

? ? ? ? ? ? Container(

? ? ? ? ? ? ? color: Colors.grey,

? ? ? ? ? ? ? height: 220.0,

? ? ? ? ? ? ? child: Column(mainAxisSize: MainAxisSize.min,children: <Widget>[

? ? ? ? ? ? ? ? ? Center(child: Text("這里是 Flutter widget? "),)

? ? ? ? ? ? ? ],),

? ? ? ? ? ? ),

? ? ? ? ? ? Align(

? ? ? ? ? ? ? alignment: Alignment(0, 0),

? ? ? ? ? ? ? child: Text("以下是 Html 頁面 "),

? ? ? ? ? ? ),

? ? ? ? ? ? Container(

? ? ? ? ? ? ? color: Colors.redAccent,

? ? ? ? ? ? ? height: 1.0,

? ? ? ? ? ? ),

? ? ? ? ? ? Container(

? ? ? ? ? ? ? height: webViewHeight,

? ? ? ? ? ? ? child: webViewWidget,

? ? ? ? ? ? )

? ? ? ? ? ],

? ? ? ? ),

? ? ? ),

? ? );

? }

? Future<Null> _onRefresh() async {

? ? return await Future.delayed(Duration(seconds: 1), () {

? ? ? print('refresh');

? ? ? webViewWidget.refresh();

? ? });

? }

? callBack(int code, String msg, content) {

? ? //加載頁面完成后對頁面重新測量的回調

? ? if (code == 201) {

? ? ? //更新高度

? ? ? webViewHeight = content;

? ? ? print("webViewHeight " + content.toString());

? ? } else {

? ? ? //其他回調

? ? }

? ? setState(() {

? ? ? message = "回調：code[" + code.toString() + "]; msg[" + msg.toString() + "]";

? ? });

? }

}

文章最后發布于: 2019-07-20 16:01:01

?著作權歸作者所有,轉載或內容合作請聯系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 227,663評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,125評論 3贊 414
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 175,506評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,614評論 1贊 307
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,402評論 6贊 404
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 54,934評論 1贊 321
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,021評論 3贊 440
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,168評論 0贊 287
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,690評論 1贊 333
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,596評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,784評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,288評論 5贊 357
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,027評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,404評論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,662評論 1贊 280
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,398評論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,743評論 2贊 370

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Flutter加載Html并實現與JS 的雙向調用

Flutter加載Html并實現與JS 的雙向調用

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Flutter加載Html并實現與JS 的雙向調用

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频