现在很多APP里面的会出现让用户拿起手机摇一摇的场景，除了最常见的微信、QQ等社交APP里面的摇一摇，我们在把APP给测试人员测试的时候，也经常要添加上摇一摇弹窗切换环境的场景，比如下面的场景。
WechatIMG6.jpeg
所以，下面就来演示一下在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 {
@override
Widget 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;
@override
void 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();
}
@override
Widget 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值，用来进行第二道关卡。
最后的效果如下。
IMG_752AD3C863B3-1.jpeg
