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 {
  @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值，用來進行第二道關卡。

最後的效果如下。