Flutter与JS的双向调用、Flutter中Widget与Html混合加载

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

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

【x1】微信公众号的每日提醒随时随记每日积累随心而过

【x2】各种系列的视频教程免费开源关注你不会迷路

【x3】系列文章百万 Demo 随时复制粘贴使用

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

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

1 前言

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

pub 仓库 flutter_fai_webview 1.1.4
github 源码
基础使用文档

2 Demo 实现

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

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter_fai_webview/flutter_fai_webview.dart';
import 'package:flutter_swiper/flutter_swiper.dart';///   混合页面加载
///   一般用于商品详情页面的添加
///   如这里的上半部分是 Flutter Widget 内容  下半部分是 WebView
class DefaultHexRefreshPage2 extends StatefulWidget {@overrideMaxUrlHexRefreshState createState() => MaxUrlHexRefreshState();
}class MaxUrlHexRefreshState extends State<DefaultHexRefreshPage2> {String htmlUrl = "https://blog.csdn.net/zl18603543572";//原生 发送给 Flutter 的消息String message = "--";@overrideWidget build(BuildContext context) {return Scaffold(///标题appBar: buildAppBar(context),///页面主体body: buildFaiWebViewWidget(),);}... ...
}

标题就是一个 AppBar 然后来实时显示 message 内容，代码如下：

///标题部分
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 部分：

 /// WebView 部分Container buildFaiWebViewWidget() {return Container(child: FaiWebViewWidget(///下拉刷新onRefresh: _onRefresh,//头headerWidget: buildHeaderWidget(),//webview 加载网页链接url: htmlUrl,//webview 加载信息回调callback: callBack,//输出日志isLog: false,),);}

_onRefresh 就是配置的下拉刷新的回调，如果不需要下拉刷新功能，不配置即可，是可选参数配置：

 ///如果你需要的话就使用Future<Null> _onRefresh() async {return await Future.delayed(Duration(seconds: 1), () {print('refresh');});}

属性 headerWidget 用来配置顶部的 Widget 部分，在这里构建了一个轮播图：

 flutter_swiper: ^1.1.6

这里是随机的几个图片

 List<String> imageList = ["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603893462481&di=d4c8e6e88762f5a65aec40c02dd8a93b&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110320%2F11032021067b907d3ed754dd93.jpg","https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1603365312,3218205429&fm=26&gp=0.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603893511117&di=661e0441ef2e37676944b61714dc66d5&imgtype=0&src=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(" 点击 " + index.toString());},// 相邻子条目视窗比例viewportFraction: 1,// 布局方式//layout: SwiperLayout.STACK,// 用户进行操作时停止自动翻页autoplayDisableOnInteraction: true,// 无线轮播loop: true,//当前条目的缩放比例scale: 1,),);}

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

完整源码在这里

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