Flutter中如何监听设备方向变化并实现定向跳转？

可以通过WidgetsBindingObserver结合页面生命周期管理，实现无页面重建的方向监听，同时解决重复跳转和返回后失效的问题。核心思路是在页面初始化时注册监听，销毁时移除，并用状态变量控制跳转逻辑。

完整代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
  // 标记是否已触发跳转，避免重复执行
  bool _hasNavigated = false;

  @override
  void initState() {
    super.initState();
    // 注册方向变化监听
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    // 页面销毁时移除监听，避免内存泄漏
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    // 延迟一帧确保MediaQuery获取到最新的方向数据
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final currentOrientation = MediaQuery.of(context).orientation;
      // 仅在横屏且未跳转时触发逻辑
      if (currentOrientation == Orientation.landscape && !_hasNavigated) {
        setState(() {
          _hasNavigated = true;
        });
        // 跳转到指定横屏页面
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const LandscapeTargetPage()),
        ).then((_) {
          // 从目标页面返回后，重置跳转标记，允许下次触发
          setState(() {
            _hasNavigated = false;
          });
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页')),
      body: const Center(child: Text('旋转设备到横屏试试')),
    );
  }
}

// 示例横屏目标页面
class LandscapeTargetPage extends StatelessWidget {
  const LandscapeTargetPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('横屏页面')),
      body: const Center(child: Text('这是横屏专属页面')),
    );
  }
}

关键细节说明 #

• 生命周期管理：在initState注册监听，dispose移除监听，确保页面返回时（initState重新执行）能重新注册监听，解决返回后失效的问题。
• 防重复跳转：用_hasNavigated变量标记跳转状态，跳转后设为true，返回时重置为false，避免didChangeMetrics多次触发导致重复跳转。
• 数据同步：通过addPostFrameCallback延迟执行方向判断，保证获取到最新的设备方向数据，避免因Metrics变化时MediaQuery未更新导致的判断错误。
• 无页面重建：整个监听过程不会触发页面build方法的不必要重建，仅在更新跳转标记时执行setState，不会影响页面结构。

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