ios - 在 Flutter 中监听方向状态；旋转前后

Question

OrientationBuilder在完全转换发生后报告方向变化，然后在此之后进行重建。
有没有办法在定向开始之前采取行动？我并不是要抢先进行轮换，而是同时进行更改，而不是之后。
目标:

设备旋转。

检测到这一点并重建 UI 以显示覆盖。

Flutter 执行自己的转换，将 UI 旋转到新的方向。

在固定时间段后，只需重建以隐藏覆盖。

挑战，如何在第 3 点出现之前完成第 2 点？

Answer 1

是的，您可以获得方向更改较早 使用 WidgetsBindingObserver通过覆盖 didChangeMetrics .
使用方法didChangeMetrics你可以简单地混入 WidgetBindingObserver在 State implementation有状态的小部件:

class _FooState extends State with WidgetsBindingObserver {
  @override
  void didChangeMetrics() {
    // This will be triggered by changes in orientation.
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
}

确定方向
方向由可用尺寸的纵横比决定。这意味着您可以在 didChangeMetrics 中获得方向。使用以下代码:

final orientation = WidgetsBinding.instance.window.physicalSize
    .aspectRatio > 1 ? Orientation.landscape : Orientation.portrait;

例子
我已经构建了一个示例 StatefulWidget比较 OrientationBuilder回调到 didChangeMetrics :

import 'package:flutter/material.dart';

void main() {
  runApp(OrientationListener());
}

class OrientationListener extends StatefulWidget {
  @override
  _OrientationListenerState createState() => _OrientationListenerState();
}

class _OrientationListenerState extends State<OrientationListener>
    with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    print('$WidgetsBindingObserver metrics changed ${DateTime.now()}: '
        '${WidgetsBinding.instance.window.physicalSize.aspectRatio > 1 ? Orientation.landscape : Orientation.portrait}');
  }

  @override
  Widget build(BuildContext context) {
    return MediaQuery(
      data: MediaQueryData.fromWindow(WidgetsBinding.instance.window),
      child: OrientationBuilder(
        builder: (context, orientation) {
          print('$OrientationBuilder rebuild ${DateTime.now()}: $orientation');

          return Container();
        },
      ),
    );
  }
}

结果
运行此示例显示两个函数的以下时间:

WidgetsBindingObserver metrics changed 2020-08-22 14:47:01.690172: Orientation.portrait
WidgetsBindingObserver metrics changed 2020-08-22 14:47:01.706574: Orientation.landscape
OrientationBuilder rebuild 2020-08-22 14:47:01.760589: Orientation.landscape
WidgetsBindingObserver metrics changed 2020-08-22 14:47:06.537083: Orientation.landscape
WidgetsBindingObserver metrics changed 2020-08-22 14:47:06.549545: Orientation.portrait
OrientationBuilder rebuild 2020-08-22 14:47:06.603859: Orientation.portrait
WidgetsBindingObserver metrics changed 2020-08-22 14:47:10.423787: Orientation.portrait
WidgetsBindingObserver metrics changed 2020-08-22 14:47:10.442866: Orientation.landscape
OrientationBuilder rebuild 2020-08-22 14:47:10.501729: Orientation.landscape
WidgetsBindingObserver metrics changed 2020-08-22 14:47:13.639545: Orientation.landscape
WidgetsBindingObserver metrics changed 2020-08-22 14:47:13.658906: Orientation.landscape
WidgetsBindingObserver metrics changed 2020-08-22 14:47:13.672025: Orientation.portrait
OrientationBuilder rebuild 2020-08-22 14:47:13.730771: Orientation.portrait

所以在我的情况下，检测的差异大约是 0.06秒。
观察
正如您从上面看到的，差异是微不足道的(我会说)。所以我什至不确定这是否对你有用。
此外，我观察到 OrientationBuilder回调实际上被称为 一开始设备旋转 - 至少在我的 Android 模拟器上。这意味着您可以在轮换发生之前重建您的 UI。

我希望这对你有所帮助:)