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

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

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

flutter_WebView_plugin

webView_flutter

flutter_inappbrowser

html

flutter_html

flutter_html_view

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

開發(fā)插件要具備的知識：

Flutter 與 原生 Android iOS 雙向通信

Flutter 中內(nèi)嵌 Android iOS 原生View的編程基礎(chǔ)

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

Flutter_Fai_Webview 插件可實現(xiàn)的功能：

同時適配于 Android Ios 兩個平臺

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

加載 Html 文本數(shù)據(jù) 如? .... 等

加載 Html 標(biāo)簽數(shù)據(jù) 如??

...

實現(xiàn) WebView 加載完成后，自動測量 WebView 的高度，并回調(diào) Flutter

實現(xiàn) WebView 加載完成監(jiān)聽

實現(xiàn) WebView 上下滑動、滑動到頂部兼聽、滑動到底部兼聽并回調(diào) Flutter

實現(xiàn) 兼聽 WebView 輸出日志并將日志回調(diào) Flutter

實現(xiàn) 為 Html 頁面中所有的圖片添加點擊事件 并回調(diào) Flutter

實現(xiàn) Html 中Js 調(diào)用 Flutter 頁面功能

實現(xiàn) Flutter 頁面中 觸發(fā) Html 頁面中 Js 方法

本插件開發(fā)的過程將在這里詳細(xì)論述

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

flutter_fai_webview:

git:

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

ref: master

引入頭文件

import 'package:flutter_fai_webview/flutter_fai_webview.dart';

1

//使用插件 FaiWebViewWidget

webViewWidget = FaiWebViewWidget(

//webview 加載網(wǎng)頁鏈接

url: htmlUrl,

//webview 加載信息回調(diào)

callback: callBack,

//輸出日志

isLog: true,

);

FaiWebViewWidget({

//webview 加載網(wǎng)頁鏈接

this.url,

//webview 加載 完整的 html 文件數(shù)據(jù)? 如 ....

// 不完整的 html 文件數(shù)據(jù) 如

...

中已有的樣式 不會適配移動端顯示

this.htmlData,

//webview 加載完整的 html 文件數(shù)據(jù) 或者是 不完整的 html 文件數(shù)據(jù) 如

//不完整的 html 文件數(shù)據(jù) 如

this.htmlBlockData,

//輸出 Log 日志功能

this.isLog,

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

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

this.htmlImageIsClick = false,

// Html 頁面中圖片點擊回調(diào)

this.imageCallBack,

// Html 頁面中所有的消息回調(diào)

this.callback,

});

/**

* code 原生 Android iOS 回調(diào) Flutter 的消息類型標(biāo)識

* message 消息類型日志

* content 回調(diào)的基本數(shù)據(jù)

*/

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

詳細(xì)說明

//當(dāng)前點擊的圖片 URL

String imageUrl = null;

//是否顯示浮動按鈕

bool isShowFloat = false;

/**

* code 當(dāng)前點擊圖片的 位置

* url 當(dāng)前點擊圖片對應(yīng)的 鏈接

* images 當(dāng)前 Html 頁面中所有的圖片集合

*/

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

imageUrl = url;

setState(() {});

}

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

String call = "回調(diào) code:" +

code.toString() +

" msg:" +

msg.toString() +

" content:" +

content.toString();

if (code == 201) {

//加載頁面完成后 對頁面重新測量的回調(diào)

//這里沒有使用到

//當(dāng)FaiWebViewWidget 被嵌套在可滑動的 widget 中，必須設(shè)置 FaiWebViewWidget 的高度

//設(shè)置 FaiWebViewWidget 的高度 可通過在 FaiWebViewWidget 嵌套一層 Container 或者 SizeBox

webViewHeight = content;

} else if (code == 202) {

// Html 頁面中 Js 的回調(diào)

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

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

String jsJson = content;

} else if (code == 203) {

// 為 Html 頁面中的圖片添加 點擊事件后，點擊圖片會回調(diào)此方法

// content 為當(dāng)前點擊圖片的 地址

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

// 這個功能可以在 imageCallBack 回調(diào)中處理

} else if (code == 301) {

//當(dāng) WebView 滑動到頂部的回調(diào)

} else if (code == 302) {

//當(dāng) WebView 開始向下滑動時的回調(diào)

//隱藏按鈕

isShowFloat = true;

} else if (code == 303) {

//當(dāng) WebView 開始向上滑動時的回調(diào)

//顯示按鈕

isShowFloat = false;

} else if (code == 304) {

//當(dāng) WebView 滑動到底部的回調(diào)

} else if (code == 401) {

//當(dāng) WebView 開始加載的回調(diào)

} else if (code == 402) {

//當(dāng) WebView 加載完成的回調(diào)

} else if (code == 403) {

// WebView 中 Html中日志輸出回調(diào)

} else if (code == 401) {

// WebView 加載 Html 頁面出錯的回調(diào)

} else if (code == 501) {

// 當(dāng) Html 頁面中有 Alert 彈框彈出時 回調(diào)消息

} else if (code == 1000) {

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

} else {

//其他回調(diào)

}

setState(() {

message = call;

});

}

//調(diào)用此方法 便可刷新(重新加載頁面)

webViewWidget.refresh();

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

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

webViewWidget.loadJsMethod("testAlert()");

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 {

//要顯示的頁面內(nèi)容

Widget childWidget;

//加載Html的View

FaiWebViewWidget webViewWidget;

//原生 發(fā)送給 Flutter 的消息

String message = "--";

// 頁面

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

@override

void initState() {

super.initState();

//使用插件 FaiWebViewWidget

webViewWidget = FaiWebViewWidget(

//webview 加載網(wǎng)頁鏈接

url: htmlUrl,

//webview 加載信息回調(diào)

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) {

//加載頁面完成后 對頁面重新測量的回調(diào)

//這里沒有使用到

//當(dāng)FaiWebViewWidget 被嵌套在可滑動的 widget 中，必須設(shè)置 FaiWebViewWidget 的高度

//設(shè)置 FaiWebViewWidget 的高度 可通過在 FaiWebViewWidget 嵌套一層 Container 或者 SizeBox

if (code == 201) {

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

int webViewHeight = content;

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

} else {

//其他回調(diào)

}

setState(() {

message = "回調(diào)：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 數(shù)據(jù) 并添加移動適配

*/

class DefaultHtmlBlockDataPage2 extends StatefulWidget {

@override

DefaultHtmlBlockDataPageState createState() =>

DefaultHtmlBlockDataPageState();

}

class DefaultHtmlBlockDataPageState extends State {

FaiWebViewWidget webViewWidget;

//原生 發(fā)送給 Flutter 的消息

String message = "--";

double webViewHeight = 100;

//要顯示的頁面內(nèi)容

Widget childWidget;

String htmlBlockData = "

?

生物真題?

@override

void initState() {

super.initState();

//使用插件 FaiWebViewWidget

webViewWidget = FaiWebViewWidget(

//webview 加載網(wǎng)頁鏈接

htmlBlockData: htmlBlockData,

//webview 加載信息回調(diào)

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) {

//加載頁面完成后 對頁面重新測量的回調(diào)

//這里沒有使用到

//當(dāng)FaiWebViewWidget 被嵌套在可滑動的 widget 中，必須設(shè)置 FaiWebViewWidget 的高度

//設(shè)置 FaiWebViewWidget 的高度 可通過在 FaiWebViewWidget 嵌套一層 Container 或者 SizeBox

if (code == 201) {

webViewHeight = content;

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

} else {

//其他回調(diào)

}

setState(() {

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

});

}

}

也就是說 一個頁面中，一部分是 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 {

FaiWebViewWidget webViewWidget;

//原生 發(fā)送給 Flutter 的消息

String message = "--";

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

double webViewHeight = 1;

@override

void initState() {

super.initState();

//使用插件 FaiWebViewWidget

webViewWidget = FaiWebViewWidget(

//webview 加載網(wǎng)頁鏈接

url: htmlUrl,

//webview 加載信息回調(diào)

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 的滑動事件

* 所有關(guān)于 監(jiān)聽 WebView 的滑動監(jiān)聽將會失效

*/

Widget buildRefreshHexWidget() {

return RefreshIndicator(

//下拉刷新觸發(fā)方法

onRefresh: _onRefresh,

//設(shè)置webViewWidget

child: SingleChildScrollView(

child: Column(

children: [

Container(

color: Colors.grey,

height: 220.0,

child: Column(mainAxisSize: MainAxisSize.min,children: [

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 _onRefresh() async {

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

print('refresh');

webViewWidget.refresh();

});

}

callBack(int code, String msg, content) {

//加載頁面完成后 對頁面重新測量的回調(diào)

if (code == 201) {

//更新高度

webViewHeight = content;

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

} else {

//其他回調(diào)

}

setState(() {

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

});

}

}

文章最后發(fā)布于: 2019-07-20 16:01:01

總結(jié)

以上是生活随笔為你收集整理的flutter嵌入HTML5页面,Flutter加载Html并实现与JS 的双向调用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。