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

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


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

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

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

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

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

在这里插入图片描述
这种效果的应用场景 如商品详情页面。

1 前言

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

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随时复制粘贴肯定是需要源码的

完整源码在这里

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

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
已标记关键词 清除标记
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统后端应用权限的管理,其主要涵盖了六大核心业务模块、十几张数据库表。 其的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页