Flutter：如何按需设置并锁定屏幕方向

没问题，这个需求其实很常见，咱们可以通过Flutter的系统方向控制API结合页面生命周期来实现，既能在当前页面锁定横屏（支持左右横屏切换），又能保证离开该页面后自动恢复到原来的屏幕方向设置。

核心思路 #

我们需要在页面初始化时，修改系统允许的屏幕方向为左横屏和右横屏，并在页面销毁时恢复之前的方向设置——这样就能确保只有当前页面处于横屏锁定状态，其他页面不受影响。

具体实现步骤 #

1. 导入必要的包
   首先需要导入Flutter的系统服务包，用来控制屏幕方向：

   import 'package:flutter/services.dart';
   

2. 在页面State类中保存原始方向
   定义一个变量来存储进入页面之前的系统首选方向，方便后续恢复：

   List<DeviceOrientation>? _originalOrientations;
   

3. 页面初始化时设置横屏方向
   在initState方法中，先获取当前系统的首选方向，再设置新的允许方向（仅左右横屏）：

   @override
   void initState() {
     super.initState();
     // 保存原始的屏幕方向设置
     _originalOrientations = SystemChrome.preferredOrientations;
     
     // 设置当前页面允许的方向：左横屏 + 右横屏
     SystemChrome.setPreferredOrientations([
       DeviceOrientation.landscapeLeft,
       DeviceOrientation.landscapeRight,
     ]);
   }
   

4. 页面销毁时恢复原始方向
   在dispose方法中，把屏幕方向恢复到进入页面之前的状态：

   @override
   void dispose() {
     // 恢复原始的屏幕方向设置
     if (_originalOrientations != null) {
       SystemChrome.setPreferredOrientations(_originalOrientations!);
     }
     super.dispose();
   }
   

完整代码示例 #

下面是一个完整的StatefulWidget页面示例，直接就能用：

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

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

  @override
  State<LandscapeLockedPage> createState() => _LandscapeLockedPageState();
}

class _LandscapeLockedPageState extends State<LandscapeLockedPage> {
  List<DeviceOrientation>? _originalOrientations;

  @override
  void initState() {
    super.initState();
    // 保存原始方向
    _originalOrientations = SystemChrome.preferredOrientations;
    // 设置当前页面仅允许左右横屏
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  }

  @override
  void dispose() {
    // 恢复原始方向
    if (_originalOrientations != null) {
      SystemChrome.setPreferredOrientations(_originalOrientations!);
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('横屏锁定页面'),
      ),
      body: const Center(
        child: Text(
          '这个页面只能左右横屏切换，返回后恢复原方向',
          style: TextStyle(fontSize: 20),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

注意事项 #

• 这种方式依赖页面的生命周期，所以如果你的页面是通过push导航进入的，dispose会在页面被弹出时触发，自动恢复方向；如果是底部导航栏切换这类场景，可能需要结合didChangeAppLifecycleState监听页面可见性来处理，但大部分场景下initState+dispose就足够了。
• 部分平板或特殊设备可能对屏幕方向有额外限制，但主流手机都支持左右横屏切换，这个方案兼容性很好。

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