Flutter单页面屏幕方向设置问题：返回后无法识别横屏状态

首先，先帮你指出现有代码里的一个明显语法错误——在dispose方法中，setPreferredOrientations的参数列表开头用了圆括号(，但结尾是方括号]，这会导致编译错误，先修正这个：

@override
void dispose() {
  super.dispose();
  // 修正括号错误，统一用方括号包裹方向列表
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitDown,
    DeviceOrientation.portraitUp,
  ]);
}

接下来，解决你遇到的核心问题：再次进入第二个页面时无法识别当前横屏模式。这是因为即使你在initState中设置了允许横竖屏，但Flutter并不会自动触发页面方向的重新检测，尤其是当设备已经处于横屏状态时，页面没有收到方向变化的通知。

这里推荐使用WidgetsBindingObserver来监听设备方向变化，同时在页面初始化时主动获取当前方向并更新UI，确保页面能正确识别初始方向。

完整的第二个页面实现示例： #

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

class SecondScreen extends StatefulWidget {
  const SecondScreen({super.key});

  @override
  State<SecondScreen> createState() => _SecondScreenState();
}

class _SecondScreenState extends State<SecondScreen> with WidgetsBindingObserver {
  DeviceOrientation? _currentOrientation;

  @override
  void initState() {
    super.initState();
    // 添加观察者，监听应用生命周期和方向变化
    WidgetsBinding.instance.addObserver(this);
    // 设置允许的屏幕方向
    _setAllowedOrientations();
    // 主动获取当前设备方向并更新状态
    _getCurrentOrientation();
  }

  @override
  void dispose() {
    // 移除观察者
    WidgetsBinding.instance.removeObserver(this);
    // 恢复为仅竖屏
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
    ]);
    super.dispose();
  }

  // 监听应用生命周期变化，比如从后台返回时重新检测方向
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      _getCurrentOrientation();
    }
  }

  // 监听设备方向变化
  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    _getCurrentOrientation();
  }

  // 设置允许的屏幕方向
  void _setAllowedOrientations() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  }

  // 获取当前设备方向并更新状态
  void _getCurrentOrientation() {
    final currentOrientation = MediaQuery.of(context).orientation;
    setState(() {
      _currentOrientation = currentOrientation == Orientation.portrait
          ? DeviceOrientation.portraitUp
          : MediaQuery.of(context).size.width > MediaQuery.of(context).size.height
              ? DeviceOrientation.landscapeLeft
              : DeviceOrientation.landscapeRight;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("第二页面")),
      body: Center(
        child: Text(
          "当前方向：${_currentOrientation?.name ?? '未知'}",
          style: const TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

关键说明： #

• 混入WidgetsBindingObserver：通过这个观察者，我们可以监听设备的方向变化（didChangeMetrics）和应用生命周期变化（didChangeAppLifecycleState），确保在任何可能导致方向变化的场景下都能更新页面状态。
• 主动获取初始方向：在initState中调用_getCurrentOrientation，页面刚进入时就检测当前方向，避免出现方向识别滞后的问题。
• 修正dispose的语法错误：确保恢复竖屏的代码能正确执行，不会因为语法错误导致页面退出后方向没有恢复。

另外，第一个页面的实现很简单，只需要在initState中设置仅允许竖屏即可：

class FirstScreen extends StatefulWidget {
  const FirstScreen({super.key});

  @override
  State<FirstScreen> createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("第一页面")),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => const SecondScreen())),
          child: const Text("进入第二页面"),
        ),
      ),
    );
  }
}

这样修改后，无论你从第一页面返回多少次，再次进入第二页面时，页面都会正确识别当前的横屏或竖屏状态。

内容的提问来源于stack exchange，提问作者esfsef