Flutter：如何防止我的主要小部件旋转并仍然跟踪它的方向？

Posted 2023-02-23

【中文标题】Flutter：如何防止我的主要小部件旋转并仍然跟踪它的方向？

【英文标题】：Flutter: How to prevent my main widget from rotating and still keep track of it's orientation?

【发布时间】：2021-02-24 21:16:05

【问题描述】：

我正在尝试根据我的设备方向使用Rotated Box 更新子小部件的方向。

但是，我有一个限制：我不希望我的主 UI 应用旋转。我想让它始终处于锁定状态（如“竖屏”），但我仍想接收设备方向更新。

这是我找到的部分解决方案，使用native_device_orientation 包和SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])。

问题是：它对变化超级敏感，所以从用户体验的角度来看它是不合适的（正如 native_device_orientation 作者here 指出的那样）。此外，还有一个 45 度的位置，传感器的方向会变得疯狂，因为传感器处于两个方向之间的最佳位置。

有没有其他方法或观点来解决这个问题？

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:native_device_orientation/native_device_orientation.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  int _counter = 0;

  void _incrementCounter() 
    setState(() 
      _counter++;
    );
  

  int get_turns_based_on_orientation(NativeDeviceOrientation orientation) 
    switch(orientation) 
      _counter++;
      case NativeDeviceOrientation.portraitDown:
        return 2;
      case NativeDeviceOrientation.portraitUp:
        return 0;
      case NativeDeviceOrientation.landscapeLeft:
        return 1;
      case NativeDeviceOrientation.landscapeRight:
        return 3;
      case NativeDeviceOrientation.unknown:
        return 0;
    
  

  @override
  void initState() 
    super.initState();
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  
    
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: NativeDeviceOrientationReader(
        useSensor: true,
        builder: (context) 
          final orientation = NativeDeviceOrientationReader.orientation(context);
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                RotatedBox(
                  quarterTurns: get_turns_based_on_orientation(orientation),
                  child: Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                ),
              ],
            ),
          );
        
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  

【参考方案1】：

为了让你的方向改变没有任何摆动，你可以尝试用这个作为一种解决方法来降低敏感性：

每次收到设备方向更改时，请存储收到的方向以及发生此更改的时间。 在指定的时间后检查方向是否改变，如果一段时间内没有改变，则根据这个新的稳定方向重新渲染屏幕。 始终根据上次稳定的方向渲染屏幕。

适应您的代码如下：

[...]
//State Class properties
DateTime timeOfLastChange = DateTime.now();
NativeDeviceOrientation stableOrientation = NativeDeviceOrientation.portraitUp;
NativeDeviceOrientation currentOrientation = NativeDeviceOrientation.portraitUp;

[...]
builder: (context) 
          currentOrientation = NativeDeviceOrientationReader.orientation(context);
          timeOfLastChange = DateTime.now();
          Future.delayed(Duration(milliseconds: 500), () 
            if (DateTime
                .now()
                .difference(timeOfLastChange)
                .inMilliseconds > 500) 
              setState(()stableOrientation = currentOrientation;);
            
          );
[...]
          quarterTurns: get_turns_based_on_orientation(stableOrientation),
[...]

请记住，500 值是一个常数，可以对其进行调整以增加或减少方向更改的延迟。

【讨论】：

嗨，纳斯劳斯基。像魅力一样工作。谢谢！

【参考方案2】：

我认为您没有在正确的位置调用 setPreferredOrientations 方法。您需要在 initState() 和 dispose() 方法中调用它，具体取决于您的要求。 Widget build()方法是超级懂事的原因。

【讨论】：

嗨 Akif，非常感谢您的贡献。实际上，该函数应该在 .initState(...) 中调用。但是，它不会改变 45 度的感觉和“甜蜜点”效果。考虑到您的警告，我编辑了问题。谢谢。