Flutter代码锦囊---摇一摇

现在很多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