2. sensors_plus（Null safety）

（1）描述：獲取設備的速度、重力感應來判斷設備狀態

（2）適合平臺：ANDRIOD、IOS、WEB

（3）補充：主要說明AccelerometerEvent

• AccelerometerEvent：描述設備的速度，包括重力的影響?？捎脕砼袛嘣O備是否正在向特定方向移動
• UserAccelerometerEvent：描述設備的速度，但不包括重力。通常被認為是用戶對設備的影響
• GyroscopeEvent：描述設備的旋轉

（4）使用

import 'package:sensors_plus/sensors_plus.dart';accelerometerEvents.listen((AccelerometerEvent event) {print(event); }); // [AccelerometerEvent (x: 0.0, y: 9.8, z: 0.0)]userAccelerometerEvents.listen((UserAccelerometerEvent event) {print(event); }); // [UserAccelerometerEvent (x: 0.0, y: 0.0, z: 0.0)]gyroscopeEvents.listen((GyroscopeEvent event) {print(event); }); // [GyroscopeEvent (x: 0.0, y: 0.0, z: 0.0)]

（5）實現邏輯

分析：首先使用全局key獲取紫色邊框（容器）的坐標，之后根據重力感應來不斷修改加號圖標的位置。

AccelerometerEvent? acceleration; late Timer _timer; /// 容器的key GlobalKey containerKey = GlobalKey(); /// 容器的xy界限 late RenderBox containerRenderBox; var containerOffset; var containerLeftX = 0.0, containerRightX = 0.0, containerTopY = 0.0, containerBottomY = 0.0;/// 加號的key GlobalKey anchorKey = GlobalKey(); /// 加號的xy界限 late RenderBox anchorRenderBox; var anchorOffset; var anchorLeftX = 0.0, anchorRightX = 0.0, anchorTopY = 0.0, anchorBottomY = 0.0; /// 加號偏移量 var dx = 0.0.obs , dy = 0.0.obs; /// GETx特性

加號組件部分代碼

Obx(()=>Transform.translate(key: anchorKey,offset: Offset(dx.value, 0), /// 線上環境不需要dy操作，所以去掉了，可以加上即可使用child: Image.asset(R.imagesPlanIconAdd,width: 52.dp,) ))

容器組件部分代碼

/// 容器是由白色Container覆蓋到紫色Container，形成的環狀，所以要把key放在白色Container上 Container(key: controller.containerKey,decoration: BoxDecoration(color: c_FF,borderRadius: BorderRadius.all(Radius.circular(30.0),),), )

假設容器和加號圖標都已經綁定相應的key。

accelerometerEvents.listen((AccelerometerEvent event) {acceleration = event; });_timer = Timer.periodic(const Duration(milliseconds: 10), (_) {/// 該段方法主要是獲取容器的邊界坐標if(containerOffset == null && containerKey.currentContext != null){ /// 當首次進頁面的時候會出現空值的現象，所以不做操作containerRenderBox = containerKey.currentContext!.findRenderObject() as RenderBox;containerOffset = containerRenderBox.localToGlobal(Offset.zero);containerLeftX = containerOffset?.dx;containerRightX = containerOffset?.dx + containerRenderBox.size.width;containerTopY = containerOffset?.dy;containerBottomY = containerOffset?.dy + containerRenderBox.size.height;}/// 該段方法主要是獲取加號的邊界坐標if(anchorOffset == null && anchorKey.currentContext != null){anchorRenderBox = anchorKey.currentContext!.findRenderObject() as RenderBox;anchorOffset = anchorRenderBox.localToGlobal(Offset.zero);anchorLeftX = anchorOffset?.dx;anchorRightX = anchorOffset?.dx + anchorRenderBox.size.width;anchorTopY = anchorOffset?.dy;anchorBottomY = anchorOffset?.dy + anchorRenderBox.size.height;}/// 刷新加號位置if(acceleration != null && containerOffset != null && anchorOffset != null){var dxNow = acceleration!.x.abs() < 1.0? dx.value : ((anchorLeftX + (dx.value - acceleration!.x)) > containerLeftX) && (anchorRightX + (dx.value - acceleration!.x)) < containerRightX ? dx.value - acceleration!.x : dx.value;var dyNow = acceleration!.y.abs() < 1.0? dy.value : ((anchorTopY + (dy.value + acceleration!.y)) > containerTopY) && (anchorBottomY + (dy.value + acceleration!.y)) < containerBottomY ? dy.value + acceleration!.y : dy.value;dx.value = dxNow;dy.value = dyNow;} });

??：因為我使用的GETx狀態管理框架，所以當在容器外包裹成Obx(()=>Container())即可自動刷新。如果不使用，則需要setState(() {})刷新組件。

總結

以上是生活随笔為你收集整理的Flutter传感器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。