惊天秘密!如何在 Flutter 项目中实现操作引导
不要冒然评价我,你只知道我的名字,却不知道我的故事,你只是听闻我做了什么,却不知我经历过什么。
俗话说得好,产品有三宝,弹窗浮层加引导。
上图截图自我司 App 晓黑板中的口算模块,相信每个 App 开发在工作中都碰到这种场景,为了避免用户对新功能产生困惑,会对一些功能加一些引导操作。在原生开发中,例如 Android 开发中,我们可以使用 NewbieGuide 等开源库来实现。但是很遗憾的是,在 Dart packages 中找了一圈,一无所获。
但是我们还是很快就解决了问题,既然解决不了问题,我们就要学会让这个问题不存在,这时候开发一宝就显得尤其有用了。
本文完,大家下期再见
~
~
~
开个玩笑。真的猛男,敢于直面惨淡的人生,也敢于正视淋漓的鲜血,这区区需求怎么能打倒我们。接下来我们开始琢磨一下这个引导操作要怎么实现,相信各位小伙伴接到这个需求第一个想到的就是,这玩意儿不就是在整个页面上面盖一个蒙层,然后把中间再抠一块出来。最后再加一些文字和一个下一步按钮就行了嘛。你要是把这个需求想得这么简单,那你可就真是大对特对了。所以我们就按前面说的三步来实现这个东西。当然,你如果不想接着往下看的话,可以直接点击这里使用我们开发完成的引导组件库来快速在你的 Flutter 项目中接入引导功能。
盖个蒙层
那么如何在 Flutter 页面上盖一个浮层呢?翻了一下 Flutter 的 API 文档,找到了两个法宝,分别是 Overlay 和 OverlayEntry。两者的使用方法如下。
class _MyWidgetState extends State<MyWidget> {
OverlayEntry overlayEntry;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
RaisedButton(
onPressed: () {
/// 1. 创建一个 overlayEntry 实例,builder 方法返回一个 Widget
/// 该 Widget 会被渲染到页面顶层
overlayEntry = OverlayEntry(
builder: (context) => Container(
color: Colors.white.withOpacity(.4),
child: Center(
child: RaisedButton(
onPressed: () {
/// 3. 执行 remove 方法销毁 overlayEntry 实例
overlayEntry.remove();
},
child: Text('点我关闭 OverlayEntry'),
),
),
),
);
/// 2. 使用 OverlayState.insert 方法来显示 overlayEntry
Overlay.of(context).insert(overlayEntry);
},
child: Text('点我康康 Overlay 的用法'),
),
],
),
);
}
}
如果你不嫌烦的话,还可以点击这里亲自试一试效果。
中间抠一块儿
上面解决了浮层问题,下面我们就来看一下如何让蒙层中间某一块区域亮起来的问题,这个问题很简单,为什么会亮,因为有光,怎么有光。我想到了上帝,因为上帝说要有光,于是就有了光。
成为上帝 I(找到组件所在位置)
接下来就是如何成为上帝的第一步,我们要找到需要高亮的那个组件的大小和位置,经过我缜密的调查,发现在 Flutter 中可以通过 GlobalKey
来获取一个元素的大小和位置,核心代码如下:
/// 1. 声明一个 globalKey
final globalKey = GlobalKey();
RaisedButton(
/// 2. 将 globalKey 绑定到组件上
key: globalKey,
onPressed: () {
///
},
child: Text(
'点我康康控制台输出',
),
);
/// 3. 通过下面的代码来获取组件的尺寸和位置
RenderBox renderBox = globalKey.currentContext.findRenderObject();
Size size = renderBox.size;
Offset offset = renderBox.localToGlobal(Offset.zero);
print(size);
print(offset);
其中 Size
中有 width
和 height
属性,分别表示高亮组件的宽高属性,Offset
中有 dx
和 dy
属性,分别表示组件左上角距离屏幕左侧和顶部的距离。相信做 Web 开发的同学对这个都很熟悉了。
如果你不嫌烦的话,还可以点击这里亲自试一试效果。
成为上帝 II(高亮组件所在区域)
我们已经在代码层面定位到这个组件的位置了,接下来就是对该区域进行精准打击,让这块区域不被浮层的颜色所覆盖,请看成为上帝的第二步。
先看结果,可以看到中间的组件没有被遮罩层遮住,但是有眼睛的同学可能会发现,为啥上下还会各有一段也没被遮住,那是因为 RaisedButton
上下自带一个 margin,所以代码获取 RaisedButton
的实际占位比看起来要大,有兴趣的同学可以去研究一下怎么去掉这个 margin。又有同学会说了,为啥这个截图是移动端的截图,不是 Web 浏览器上的截图。这个问题问得好,请看下面核心代码。
OverlayEntry(
builder: (context) => Stack(
children: [
/// 我们使用了 ColorFiltered 来实现这个功能
ColorFiltered(
colorFilter: ColorFilter.mode(
/// 遮罩层颜色
Colors.red.withOpacity(.4),
BlendMode.srcOut,
),
child: Stack(
children: [
Container(
decoration: BoxDecoration(
/// 任何颜色均可
color: Colors.white,
backgroundBlendMode: BlendMode.dstOut,
),
),
Positioned(
/// 和需要高亮组件的大小和位置均一致
child: Container(
/// 任何颜色均可
color: Colors.white,
width: size.width,
height: size.height,
),
left: offset.dx,
top: offset.dy,
),
],
),
),
],
),
);
上面可以看到,我们使用了 Stack
和 Positioned
来实现将组件放到我们想要的位置,然后实现高亮的核心组件是 ColorFiltered
,ColorFiltered 可太好了,我可太喜欢这个组件了,它能做的事情也很有趣,后面我们还再出一篇文章去单独地介绍它。敬请期待叭~
然后说一说为啥我们的截图是移动端,不再是 Web 端,因为 ColorFiltered
这哥们太强大,以至于 Flutter 团队在 Flutter Web 上还没有完全实现它。你可以在 Flutter 仓库里面的随便找到不少关于 ColorFiltered 在 Web 上表现异常的 Issue。
当然如果你不嫌烦的话,而且也愿意在 Web 上试一下没有效果的效果,我也很贴心的为你准备了在线链接。
成为上帝 III(加上下一步按钮和文字)
终于到了最后一步,加上下一步按钮和文字,这就不用说了,创建 overlayEntry
的时候你愿意在 builder
方法里面返回啥都行。
那么我还漏掉了什么没说呢?认真思考的同学可能想到,我要怎么更新 overlayEntry
呢,引导页一般有多个呀,我不能每次都 remove 掉当前的,然后再 insert 一个新的吧,那样页面肯定会有闪烁。其实如果认真看了OverlayEntry文档的话肯定不会错过这个 markNeedsBuild
方法。这里就不再举个例子了,我太懒了。总之就是如果 builder 的内容有变化,你对 overlayEntry 执行一次 overlayEntry.markNeedsBuild()
就可以了,Flutter 就会重新渲染一次 builder 返回的内容。以此来做到无闪烁切换引导页。
相信完成了上面三步,我们即使没有成为上帝,也能做到有光,让指定区域高亮起来了。一句话总结:
我们使用了 Overlay 和 ColorFiltered 即完成了引导页的制作
我看完了
耐心看完了的小伙伴肯定都觉得作者诚不欺我,确实很简单,这两个组件我都用过。但是:
So,我们贴心地开发了一个小的库,并借鉴了 Web 端的知名引导库 Intro.js 的名字,给它取名为 flutter_intro
。
少废话,先看东西。
上图即为使用 flutter_intro
的默认主题可以快速实现的引导效果。那么我要怎么使用呢?首先在项目依赖文件 pubspec.yaml 中引入 flutter_intro
。点击这里查看最新版本。
引入 Intro 并实例化一个对象
import 'package:flutter_intro/flutter_intro.dart';
/// 1. 引入 Intro,实例化一个对象,传入必传的 stepCount 参数
/// 和 widgetBuilder 参数,其中 widgetBuilder 可以使用库内置的
/// 方法,这样就只需传入需要显示的文本即可。
/// 当然如果你不嫌烦的话,也可以自己实现 widgetBuilder 方法
Intro intro = Intro(
/// 总共的引导页数量,必传
stepCount: 4,
/// 高亮区域与 widget 的内边距
padding: EdgeInsets.all(8),
/// 高亮区域的圆角半径
borderRadius: BorderRadius.all(Radius.circular(4)),
/// 使用库默认提供的 useDefaultTheme 可以快速构建引导页
/// 需要自定义引导页样式和内容,需要自己实现 widgetBuilder 方法
widgetBuilder: StepWidgetBuilder.useDefaultTheme(
/// 提示文本
texts: [
'你好呀,我是 Flutter Intro。',
'我可以帮你在 Flutter 项目中快读实现 Step By Step 引导。',
'我的用法也十分简单,你可以通过 example 和 api 文档快速掌握和使用。',
'为了快速实现引导,我也默认提供了一套样式,开箱即用,祝大家使用愉快,再见!',
],
/// 按钮文字
btnLabel: '我知道了',
/// 是否在按钮后显示当前步骤
showStepLabel: true,
),
);
下图为 flutter_intro
支持的一些参数配置所对应的位置介绍:
给需要加引导的的 Widget 绑定 globalKey
好熟悉的操作,和上面介绍的一模一样。
当然,这里为了方便大家使用,库的内部为大家创建好了 globalKey,使用的时候只需要通过 intro.keys[下标]
获取就行了。
Placeholder(
/// 2. 第一个引导页即绑定 keys 中的第一项,以此内推
key: intro.keys[0]
)
真是太方便了!
全军出击
好了,我们已经做好全部的准备了。输入以下指令,点击运行。
intro.start(context);
没了,是不是很简单。
你这个太丑了
如果你嫌我的默认主题丑,想要自己实现 widgetBuilder
方法,我也可以接受。
final Widget Function(StepWidgetParams params) widgetBuilder;
该方法会在引导页出现时由 flutter_intro
内部调用,并会将当前页面上的一些数据通过参数的形式 StepWidgetParams
传进来,最终渲染在屏幕上的为此方法返回的组件。
class StepWidgetParams {
/// 返回前一个引导页方法,如果没有,则为 null
final VoidCallback onPrev;
/// 进入下一个引导页方法,如果没有,则为 null
final VoidCallback onNext;
/// 结束所有引导页方法
final VoidCallback onFinish;
/// 当前执行到第几个引导页,从 0 开始
final int currentStepIndex;
/// 引导页的总数
final int stepCount;
/// 屏幕的宽高
final Size screenSize;
/// 高亮组件的的宽高
final Size size;
/// 高亮组件左上角坐标
final Offset offset;
}
StepWidgetParams
提供了生成引导页所需要的所有参数,默认提供的主题也是基于此参数生成引导页。
尾声
天下没有不散的筵席,但是如果你请客,我可以多陪你吃一会儿。
这篇文章主要介绍了如何在 Flutter 中实现操作引导,并且我们基于此封装了一个我们眼里东半球最好用的 flutter_intro
。
对 Electron 感兴趣?请关注我们的开源项目 Electron Playground,带你极速上手 Electron。
我们每周五会精选一些有意思的文章和消息和大家分享,来掘金关注我们的 晓前端周刊。
我们是好未来 · 晓黑板前端技术团队。
我们会经常与大家分享最新最酷的行业技术知识。
欢迎来 知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园 关注我们。
惊天秘密!如何在 Flutter 项目中实现操作引导的更多相关文章
- [Laravel-Swagger]如何在 Laravel 项目中使用 Swagger
如何在 Laravel 项目中使用 Swagger http://swagger.io/getting-started/ 安装依赖 swagger-php composer require zirco ...
- 如何在cocos2d项目中enable ARC
如何在cocos2d项目中enable ARC 基本思想就是不支持ARC的代码用和支持ARC的分开,通过xcode中设置编译选项,让支持和不支持ARC的代码共存. cocos2d是ios app开发中 ...
- 如何在NodeJS项目中优雅的使用ES6
如何在NodeJS项目中优雅的使用ES6 NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性.只是在使用的时候需要在node后面加 ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 如何在mvc项目中使用apiController
文章地址:How do you route from an MVC project to an MVC ApiController in another project? 文章地址:How to Us ...
- 如何在Ionic2项目中使用第三方JavaScript库
onic的官网放出一记大招Ionic and Typings,来介绍如何在Ionic2项目中使用第三方JavaScript库. 因为在前阵子正好想用一个非常有名的第三方JS库ChartJs来实现一些东 ...
- 如何在maven项目中使用spring
今天开始在maven项目下加入spring. 边学习边截图. 在这个过程中我新建了一个hellospring的项目.于是乎从这个项目出发开始研究如何在maven项目中使用spring.鉴于网上的学习资 ...
- 如何在Vue-cli项目中使用JTopo
1.前言 jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包.其体积小,性能优异,由一群开发爱好者来维护.唯一感 ...
- 如何在Vue项目中给路由跳转加上进度条
1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...
随机推荐
- 02、Hibernate开发步骤
1.创建Hibernate配置文件(hibernate.cfg.xml) <?xml version="1.0" encoding="UTF-8"?> ...
- 4.1 Spring源码 --- 监听器的原理
目标: 1. 监听器如何使用 2. 监听器的原理 3. 监听器的类型 4. 多播器的概念和作用 5. 接口类型的监听器是如何注册的? 6. 注解类型的监听器和如何注册的? 7. 如果想在所有的bean ...
- 早安打工人! 来把你的.NET程序模块化吧
嗨朋友们,大家好! 还记得我是谁吗? 对了! 我就是 .NET 打工人 玩双截棍的熊猫 今天呐,我特别要向 写框架 的朋友们,想要写框架 ** 的朋友们,已经有框架** 的朋友问声好! 为什么呢?因为 ...
- 图像分割必备知识点 | Unet详解 理论+ 代码
文章转自:微信公众号[机器学习炼丹术].文章转载或者交流联系作者微信:cyx645016617 喜欢的话可以参与文中的讨论.在文章末尾点赞.在看点一下呗. 0 概述 语义分割(Semantic Seg ...
- 接上一篇:(三) Spring环境搭建
3.1.获取 Spring framework jar 包 (一) spring官网下载 (二)spring的核心包 (三) 配置 XML 1. 新建立一个 xml.名字任意,如 applicatio ...
- JAVA 中的Optional (臭名昭著的空指针异常(NullPointerException))
从 Java 8 引入的一个很有趣的特性是 Optional 类.Optional 类主要解决的问题是臭名昭著的空指针异常(NullPointerException) -- 每个 Java 程序员都 ...
- 【电子取证:FTK Imager篇】DD、E01系统镜像仿真
星河滚烫,人生有理想! ---[suy999] DD.E01系统镜像动态仿真 (一)使用到的软件 1.FTK Imager (v4.5.0.3) 2.VMware Workstation 15 P ...
- Matlab 画图1
plot函数 plot最简单的是plot(x,y),其中,x,y是一组数据 如果要画出\(y=x^2\)的图像 在Command Window中输入 x =[1 2 3]; y =[4 5 6]; p ...
- mysql主从同步上---主从同步原理
1.主从同步机制 1.1 主从同步介绍和优点 在多台数据服务器中,分为主服务器和从服务器.一台主服务器对应多台从服务器. 主服务器只负责写入数据,从服务器只负责同步主服务器的数据,并让外部程序 ...
- SQL Alias模板
再记不住的话就扇自己巴掌 SELECT * FROM class1 c INNER JOIN class2 p ON c.id = p.id INNER JOIN class3 s ON c.id = ...