Flutter：页面从导航栈出栈时如何重新触发屏幕方向切换？

应用启动时通过main()全局设置竖屏：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations(
    [DeviceOrientation.portraitUp],
  ).then((_) {
    runApp(const MyApp());
  });
}

幻灯片页面单独设置为横屏：

SystemChrome.setPreferredOrientations([
  DeviceOrientation.landscapeLeft,
  DeviceOrientation.landscapeRight,
]);
return MaterialApp(
  ...
);

问题现象：从幻灯片页面返回主页面时，屏幕仍保持横屏；但从启动页跳转主页面时，方向会正常切换为竖屏。具体流程：

• 启动页（竖屏）
• 主页面（竖屏）
• 幻灯片页面（横屏）
• 从幻灯片返回主页面（仍为横屏）<<- 此处应切换回竖屏！
• 启动页（仍为横屏）
• 跳转至主页面 <<- 此时方向正常切换为竖屏

曾尝试在主页面的build方法中设置竖屏，但无效果：

class MainScreen extends StatelessWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
  ...

解决方案：监听页面返回事件触发方向切换 #

方法1：用RouteObserver精准监听页面返回 #

这种方式能捕捉到「子页面出栈、当前页面重新显示」的事件，适合全局统一处理页面方向恢复。

1. 定义全局路由观察者实例：

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

2. 在MaterialApp中注册观察者：

MaterialApp(
  navigatorObservers: [routeObserver], // 注册观察者
  home: const MainScreen(),
);

3. 将主页面改为StatefulWidget，混入RouteAware并重写didPopNext：

class MainScreen extends StatefulWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> with RouteAware {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 绑定当前页面到观察者
    routeObserver.subscribe(this, ModalRoute.of(context) as PageRoute);
  }

  @override
  void dispose() {
    // 取消绑定，避免内存泄漏
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPopNext() {
    // 从子页面返回时，强制切换回竖屏
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    super.didPopNext();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 页面内容
    );
  }
}

方法2：在幻灯片页面返回前主动设置竖屏 #

如果只针对单个页面场景，可在返回逻辑中先恢复方向再执行pop：

ElevatedButton(
  onPressed: () async {
    // 先切换回竖屏
    await SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    // 再返回主页面
    Navigator.pop(context);
  },
  child: const Text('返回'),
);

为什么之前的build方法设置无效？ #

Flutter会复用导航栈中已存在的页面实例，从子页面返回时，主页面的build方法不一定会重新执行，导致设置方向的代码无法触发。而didPopNext是专门监听页面从后台回到前台的生命周期方法，能确保返回时执行方向切换逻辑。

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