Flutter获取真实设备方向

Question

我使用下面的代码获取设备方向

if (MediaQuery.of(context).orientation == Orientation.landscape) // Landscape
  {
    // Do Something
  }
else // Portrait
  {    
    // Do Something Else
  }

我想获得真实的设备方向信息，例如，我想知道设备是landscapeRight还是landscapeLeft，portraitUp还是portraitDown。

有人能帮忙吗？提前致谢。

- Zeyad Ahmad Aql

---

只是出于好奇，你为什么想要那个？ - Er1

@Er1，我在居中AlertDialog时遇到了问题，当它处于landscapeRight和landscapeLeft模式时，填充会发生变化。我在这里提出了问题：https://stackoverflow.com/questions/62339482/flutter-alert-dialog-not-centered 如果我能知道正确的设备方向，我就能解决AlertDialog居中问题。 - Zeyad Ahmad Aql

这可能会有所帮助 https://pub.dev/packages/native_device_orientation - Sami Haddad

@SamiHaddad 我会去看看的，谢谢 =D - Zeyad Ahmad Aql

Answer 1

重申问题，我们需要一种方式来确定设备方向是：

• 竖屏向上
• 竖屏向下
• 横屏向左
• 横屏向右

根据这个问题，Flutter自带的OrientationBuilder小部件不能提供此信息。它只会告诉你父小部件的方向（竖屏或横屏）。

欢迎使用native_device_orientation包。该包具有NativeDeviceOrientationReader小部件，类似于OrientationBuilder。

NativeDeviceOrientationReader(
  builder: (context) {
     NativeDeviceOrientation orientation = NativeDeviceOrientationReader.orientation(context);

     return Center(child: Text(orientation.toString()))
  },
),

- Banjoe

Answer 2

有一个小部件OrientationBuilder可以帮助您解决这个问题

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Create a grid with 2 columns in portrait mode,
      // or 3 columns in landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
);

我看到你正在尝试将其与对话框一起使用以使其居中，如果您查看对话框的代码，您将看到它使用了一个ConstraninedBox和56.0的步骤填充（如果屏幕允许，它将以56.0的步骤扩展其大小）。 您可以使用自己的ConstrainedBox包装AlertDialog的内容，并计算最小和最大大小，使其看起来居中，正方形，高矩形等。

final size = MediaQuery.of(context).size;
            double actionHeight = 16.0 + 36.0; //The size of the action widget, 8 padding top and bottom (16), and if ButtonBarTheme.buttonHeight == null it defaults to 36 minHeight
return AlertDialog(
   scrollable: true,
   title: Text('Title'),
   content: ConstrainedBox(
     constraints: BoxConstraints(
       minWidth: (size.width / 2) - actionHeight, //do the math you want here
       maxWidth: (size.width / 2) - actionHeight, //do the math you want here
       minHeight: (size.height/ 2) - actionHeight, //do the math you want here
       maxHeight: (size.height/ 2) - actionHeight //do the math you want here
     ),
     child: SingleChildScrollView(
       child: Column(
         children: [
           for(int i = 0; i < 4; i++)
             ListTile(
               title: Text('Text $i'),
               trailing: i % 2 == 0 ? 
                 Icon(Icons.check_box) : Icon(Icons.check_box_outline_blank)
             )
           ],
         )
       )
     ),
   actions: [
      FlatButton(child: Text('Cancel'), onPressed: () => Navigator.pop(context)),
      FlatButton(child: Text('Ok'), onPressed: () => Navigator.pop(context))
   ],
);

你可以结合OrientationBuilder和ConstrainedBox，基于方向进行一些数学计算，并使其看起来符合你的要求。

- EdwynZN

---

这并没有回答问题 - “我想获取真实的设备方向。例如，我想知道设备是横向右侧还是横向左侧，纵向朝上还是朝下。” - Banjoe

Answer 3

这是我之前解决问题的方法

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  Widget _portraitView(){

    // Return Your Widget View Here Which you want to Load on Portrait Orientation.
    return Container(
   width: 300.00,
    color: Colors.green,
    padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
    child: Text(' Portrait View Detected. ',
            textAlign: TextAlign.center,  
            style: TextStyle(fontSize: 24, color: Colors.white)));
  } 

  Widget _landscapeView(){

    // // Return Your Widget View Here Which you want to Load on Landscape Orientation.
    return Container(
    width: 300.00,
    color: Colors.pink,
    padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
    child: Text(' Landscape View Detected.',
            textAlign: TextAlign.center,  
            style: TextStyle(fontSize: 24, color: Colors.white)));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
        appBar: AppBar(
        title: Text('Detect Device Screen Orientation')),
        body: OrientationBuilder(
          builder: (context, orientation) {
          return Center(

            child: orientation == Orientation.portrait 
            ? _portraitView() 
            : _landscapeView() 

                );
           }
          )
        )
      );
  }
}

希望能对你有所帮助。

- eko

---

抱歉，但似乎并没有回答问题。问题是如何区分landscapeRight和landscapeLeft以及portraitUp和portraitDown。 - Andrey Ozornin