屏幕旋转与 Flutter

屏幕旋转对于任何移动应用程序都是一项基本的功能，它允许用户根据需要在横向和纵向之间切换设备的方向。在 Flutter 中，您可以通过使用设备方向 API 来控制屏幕旋转。

1. 屏幕旋转方向

在 Flutter 中，您可以通过 DeviceOrientation 类来访问设备的方向。它提供了四个常量来表示设备的不同方向：

• DeviceOrientation.portraitUp：设备处于竖直状态，顶部朝上。
• DeviceOrientation.portraitDown：设备处于竖直状态，顶部朝下。
• DeviceOrientation.landscapeLeft：设备处于横向状态，左侧朝上。
• DeviceOrientation.landscapeRight：设备处于横向状态，右侧朝上。

2. 锁定屏幕旋转方向

要锁定屏幕旋转方向，您可以使用 SystemChrome 类中的 setPreferredOrientations 方法。该方法接受一个 List<DeviceOrientation> 参数，用于指定允许的屏幕旋转方向。例如，以下代码将锁定屏幕方向为竖直状态：

SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
  DeviceOrientation.portraitDown,
]);

3. 监听屏幕旋转方向变化

要监听屏幕旋转方向的变化，您可以使用 OrientationBuilder Widget。该 Widget 会在屏幕旋转方向发生变化时重建其子 Widget。例如，以下代码显示了一个 Text Widget，其内容会根据设备的方向而变化：

OrientationBuilder(
  builder: (context, orientation) {
    if (orientation == DeviceOrientation.portraitUp) {
      return Text('竖直状态');
    } else if (orientation == DeviceOrientation.portraitDown) {
      return Text('倒立状态');
    } else if (orientation == DeviceOrientation.landscapeLeft) {
      return Text('横向状态，左侧朝上');
    } else if (orientation == DeviceOrientation.landscapeRight) {
      return Text('横向状态，右侧朝上');
    } else {
      return Text('未知状态');
    }
  },
);

4. 处理屏幕旋转

在 Flutter 中，您需要在屏幕旋转时处理您的应用程序的状态。例如，如果您有一个包含文本输入框的表单，那么您需要在屏幕旋转时保存文本输入框中的内容，以便在屏幕旋转后恢复。

您可以使用 StatefulWidget 和 State 类来处理屏幕旋转。StatefulWidget 是一个可以保存状态的 Widget，而 State 类是 StatefulWidget 的一个子类，它包含了 Widget 的状态。

例如，以下代码显示了一个包含文本输入框的表单，该表单会在屏幕旋转时保存文本输入框中的内容：

class MyStatefulWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String _text = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextField(
          onChanged: (text) {
            setState(() {
              _text = text;
            });
          },
        ),
        Text(_text),
      ],
    );
  }
}

希望本教程对您有所帮助。如果您还有其他问题，请随时留言。