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 {
  @override
  MaxUrlHexRefreshState createState() => MaxUrlHexRefreshState();
}

class MaxUrlHexRefreshState extends State<DefaultHexRefreshPage2> {

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

  //原生 发送给 Flutter 的消息
  String message = "--";
  @override
  Widget 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随时复制粘贴肯定是需要源码的

完整源码在这里

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