Flutter如何处理屏幕方向变化

Question

在Flutter中，处理屏幕方向变化是否就像重建带有更新维度的小部件一样简单？

我提出这个问题是因为在Android中，整个Activity都会被重新构建，这就是为什么所有信息都通过意图发送的原因。

设计小部件时需要注意哪些陷阱，以便处理屏幕方向变化或其他导致UI更改的变化？

- Gautham

Answer 1

基本上 - 是的！现在更具体地说，MediaQuery小部件会监听方向/尺寸/布局变化并重建其子项。这个小部件已经是MaterialApp和 WidgetsApp 小部件的一部分，所以你可能不需要包含它。

如果你想让你的小部件利用设备的方向，你可以使用MediaQuery.of静态成员来访问MediaQueryData，其中包含设备的方向。例如，一个简单的小部件，在纵向和横向显示不同的文本（需要作为MaterialApp，WidgetsApp或MediaQuery的子项）。

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    final mediaQueryData = MediaQuery.of(context);
    if (mediaQueryData.orientation == Orientation.landscape) {
      return const Text('landscape');
    }
    return const Text('portrait!');
  }
}

- Jonah Williams

Answer 2

这将帮助你强制Flutter应用程序保持竖屏模式，即使用户旋转了智能手机。

    void main(){
  ///
  /// Force the layout to Portrait mode
  /// 
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]);

  runApp(new MyApp());
}

- Raj008

---

这与问题毫不相关。 - Farid

Answer 3

根据这篇文档，您可以使用OrientationBuilder。

OrientationBuilder(
  builder: (context, orientation) {
    if (orientation == Orientation.portrait) 
         // return A
    else 
        // return B
});

- puntodamar

Answer 4

虽然Jonah的回答是正确的，但就我个人而言，我建议使用switch而不是if。

您需要在相关函数中实现不同的内容。

@override
Widget build(BuildContext context) {
  switch (MediaQuery.of(context).orientation) {
    case Orientation.landscape:
      return _landscapeContent();
    case Orientation.portrait:
    default:
      return _portraitContent();
  }
}

更新

从另一方面来看，当您拥有一个内部布尔型_fullscreen标志来保持全屏状态时（假设您在某个地方有一个全屏按钮，并且希望即使手机处于纵向模式下也显示该内容），那么if会更方便。

@override
Widget build(BuildContext context) {
  final orientation = MediaQuery.of(context).orientation;
  if (orientation == Orientation.landscape || _fullscreen) {
    return _landscapeContent();
  }
  return _portraitContent();
}

- Airon Tark