Flutter代码锦囊---摇一摇

现在很多APP里面的会出现让用户拿起手机摇一摇的场景，除了最常见的微信、QQ等社交APP里面的摇一摇，我们在把APP给测试人员测试的时候，也经常要添加上摇一摇弹窗切换环境的场景，比如下面的场景。

所以，下面就来演示一下在Flutter上要怎么加上监听手机“摇一摇”并进行后续的操作逻辑。

首先，我们要使用Flutter官方开发的传感器（sensors）插件，在pub spec.yaml目录下添加下面代码，然后保存，正常情况下IDE会自动开始下载的。

  # 用于访问加速度计和陀螺仪传感器。# https://pub.dev/packages/sensors#-readme-tab-sensors: ^0.4.0+1

然后导入相关的引用项目。

import 'package:flutter/material.dart';
// 导入传感器（`sensors`）插件
import 'package:sensors/sensors.dart';
// 导入演示用的苹果风格组件库
import 'package:flutter/cupertino.dart';

接下来就是主要代码了。

void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',home: MyHomePage(),);}
}class MyHomePage extends StatefulWidget {@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {/// 是否已经显示摇一摇弹窗。bool isShow = false;@overridevoid initState() {accelerometerEvents.listen((AccelerometerEvent event) {// 摇一摇阀值,不同手机能达到的最大值不同，如某品牌手机只能达到20。int value = 20;if (event.x >= value ||event.x <= -value ||event.y >= value ||event.y <= -value ||event.z >= value ||event.z <= -value) {if (isShow == false) {isShow = true;showDialog<bool>(context: context,barrierDismissible: true,builder: (BuildContext context) {return CupertinoAlertDialog(title: Text('摇一摇'),content: Text('摇啊摇～一直摇！'),actions: [CupertinoDialogAction(child: Text('确定'),onPressed: () {Navigator.of(context).pop(true);},),],);},).then((onValue) {if (onValue != null) {// 点击确定后返回的业务逻辑。}isShow = false;});}}});super.initState();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Flutter Demo 主页'),),);}
}

上面的代码可以直接拷贝执行，其中核心代码在下面。

    accelerometerEvents.listen((AccelerometerEvent event) {// 摇一摇阀值,不同手机能达到的最大值不同，如某品牌手机只能达到20。int value = 20;if (event.x >= value ||event.x <= -value ||event.y >= value ||event.y <= -value ||event.z >= value ||event.z <= -value) {if (isShow == false) {

使用accelerometerEvents.listen添加加速度计的监听，返回的AccelerometerEvent event中有x、y、z三个参数，分别表示以手机当前位置为中心的三维运动坐标。

然后通过设置一个value作为三维运动坐标的阀值，达到该阀值的时候才处理后面的代码，同时设置一个isShow作为记录当前是否已经弹出窗口的bool值，用来进行第二道关卡。

最后的效果如下。

Flutter代码锦囊---摇一摇相关推荐

Flutter代码锦囊---淘口令复制弹窗
对于淘系电商APP或其他类似的APP而言,获取剪贴板上的淘口令,再解析出具体的商品详情,是整个APP的核心业务操作,就像下面图片展示的这样. 下面我们就用Flutter实现这个功能,首先是前面一部分导 ...
Flutter代码锦囊---自定义曲线裁剪
在实际开发中,很多APP里面都会有一些布局需要用到曲线,而不是直线,下面举两个例子,一个是京东APP的页面,一个是淘宝APP的页面,它们都用到了曲线. 在Flutter中可以怎么实现这个效果呢,有一个 ...
Flutter代码锦囊---魔改进度条
Flutter框架提供了Material Design风格的线性进度条(LinearProgressIndicator)组件,就是下面的样子,方方正正的,一点也不圆润. 但是很多APP的设计都按照Ma ...
Flutter代码锦囊---集中管理路由与导航
当一个Flutter项目的页面多来以后,页面跳来跳去的,开发者自己都会晕,所以需要用一个集中.灵活的方式去管理项目中所有页面的路由与导航. 通常我们是使用主页(home)属性设置应用程序的默认路由,即 ...
Flutter代码锦囊---切换时页面保持状态
一个正常的Flutter项目中,通过底部导航栏(BottomNavigationBar)或者标签栏(TabBar)组件来切换页面内容,是很正常的操作.但是大家是否有发现,每次导航栏或标签栏切换页面时, ...
Flutter代码锦囊---根据环境选择URL地址
现在要给公司开发一个内部使用的APP,但是因为是小公司,没有多余的服务器资源,只能拿公司的主机当服务器,也只能在通过映射实现外网访问.所以呀,很蛋疼,只能想办法判断用户是在内网使用APP,还是在外网使 ...
Flutter 实现微信摇一摇的功能 Flutter 加速度感应
如果你有兴趣你可以关注一下公众号 biglead 来获取最新的学习资料. Flutter 从入门到精通系列文章在这里当然也必需是要有源码的在这里了 github 有点慢不妨来看看码云的源码吧 ...
bugku 管理员系统后台代码_不会吧，这也行？iOS后台锁屏监听摇一摇
[toc] 背景介绍一般情况下,出于省电.权限.合理性等因素考虑,给人的感觉是很多奇怪的需求安卓可以实现,但是iOS就无法实现!今天要介绍的需求也有这种感觉,就是"当 APP 处于后台或锁 ...
微信摇一摇开发 php,微信公众号实现摇一摇周边功能开发代码
这篇文章主要介绍了微信公众号摇一摇周边功能开发的相关资料,需要的朋友可以参考下 ①申请开通摇一摇功能申请开通摇一摇周边功能.成功提交申请请求后,工作人员会在三个工作日内完成审核.若审核不通过,可以 ...

Flutter代码锦囊---摇一摇

Flutter代码锦囊---摇一摇相关推荐

最新文章

热门文章