flutter嵌入HTML5页面,Flutter与JS的双向调用、Flutter中Widget与Html混合加载

题记

—— 执剑天涯&＃xff0c;从你的点滴积累开始&＃xff0c;所及之处&＃xff0c;必精益求精。

Flutter是谷歌推出的最新的移动开发框架。

如下图所示&＃xff0c;上部分的轮播图是使用 Flutter Widget 构建的&＃xff0c;下面的博客内容是使用 插件加载的 Html 内容。

这种效果的应用场景 如商品详情页面。

1 前言

小编的性格是用不合适&＃xff0c;就去造个轮子&＃xff0c;在Flutter 中加载 Html 的以有的插件多多少少满足不了小编的需求&＃xff0c;所以小编造了个 flutter_fai_webview 插件&＃xff0c;用来处理 Flutter 与 Html 的双向交互。

2 Demo 实现

首先是这个Demo的主体是使用Scaffold来构建的&＃xff0c;当然也需要注意要导包的&＃xff0c;代码如下

import &＃39;package:flutter/material.dart&＃39;;

import &＃39;dart:async&＃39;;

import &＃39;package:flutter_fai_webview/flutter_fai_webview.dart&＃39;;

import &＃39;package:flutter_swiper/flutter_swiper.dart&＃39;;

/// 混合页面加载

/// 一般用于商品详情页面的添加

/// 如这里的上半部分是 Flutter Widget 内容 下半部分是 WebView

class DefaultHexRefreshPage2 extends StatefulWidget {

&＃64;override

MaxUrlHexRefreshState createState() &＃61;> MaxUrlHexRefreshState();

}

class MaxUrlHexRefreshState extends State {

String htmlUrl &＃61; "https://blog.csdn.net/zl18603543572";

//原生 发送给 Flutter 的消息

String message &＃61; "--";

&＃64;override

Widget build(BuildContext context) {

return Scaffold(

///标题

appBar: buildAppBar(context),

///页面主体

body: buildFaiWebViewWidget(),

);

}

... ...

}

标题就是一个 AppBar 然后来实时显示 message 内容 &＃xff0c;代码如下&＃xff1a;

///标题部分

AppBar buildAppBar(BuildContext context) {

return 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),

),

),

);

}

然后页面主体部分就是构建的我们的 FaiWebViewWidget 部分&＃xff1a;

/// WebView 部分

Container buildFaiWebViewWidget() {

return Container(

child: FaiWebViewWidget(

///下拉刷新

onRefresh: _onRefresh,

//头

headerWidget: buildHeaderWidget(),

//webview 加载网页链接

url: htmlUrl,

//webview 加载信息回调

callback: callBack,

//输出日志

isLog: false,

),

);

}

_onRefresh 就是配置的下拉刷新的回调&＃xff0c;如果不需要下拉刷新功能&＃xff0c;不配置即可&＃xff0c;是可选参数配置&＃xff1a;

///如果你需要的话就使用

Future _onRefresh() async {

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

print(&＃39;refresh&＃39;);

});

}

属性 headerWidget 用来配置 顶部的 Widget 部分&＃xff0c;在这里构建了一个轮播图&＃xff1a;

flutter_swiper: ^1.1.6

这里是随机的几个图片

List imageList &＃61; [

"https://timgsa.baidu.com/timg?image&quality&＃61;80&size&＃61;b9999_10000&sec&＃61;1603893462481&di&＃61;d4c8e6e88762f5a65aec40c02dd8a93b&imgtype&＃61;0&src&＃61;http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110320%2F11032021067b907d3ed754dd93.jpg",

"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u&＃61;1603365312,3218205429&fm&＃61;26&gp&＃61;0.jpg",

"https://timgsa.baidu.com/timg?image&quality&＃61;80&size&＃61;b9999_10000&sec&＃61;1603893511117&di&＃61;661e0441ef2e37676944b61714dc66d5&imgtype&＃61;0&src&＃61;http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fd1a20cf431adcbefe30c97d9aeaf2edda3cc9f31.jpg"

];

///可滑动的 视图

///在 WebView 上方

Widget buildHeaderWidget() {

return Container(

height: 200.0,

child: new Swiper(

// 横向

scrollDirection: Axis.horizontal,

// 布局构建

itemBuilder: (BuildContext context, int index) {

return new Image.network(

imageList[index],

fit: BoxFit.fill,

);

},

//条目个数

itemCount: imageList.length,

// 自动翻页

autoplay: true,

//点击事件

onTap: (index) {

print(" 点击 " &＃43; index.toString());

},

// 相邻子条目视窗比例

viewportFraction: 1,

// 布局方式

//layout: SwiperLayout.STACK,

// 用户进行操作时停止自动翻页

autoplayDisableOnInteraction: true,

// 无线轮播

loop: true,

//当前条目的缩放比例

scale: 1,

),

);

}

以小编的性格&＃xff0c;要实现百万Demo随时复制粘贴肯定是需要源码的

当然以小编的性格&＃xff0c;肯定是要有视频录制的&＃xff0c;目前正在录制中&＃xff0c;你可以关注一下 西瓜视频 — 早起的年轻人 随后会上传

本文同步分享在 博客“早起的年轻人”(CSDN)。

如有侵权&＃xff0c;请联系 support&＃64;oschina.cn 删除。

本文参与“OSC源创计划”&＃xff0c;欢迎正在阅读的你也加入&＃xff0c;一起分享。