iOS/Android禁用自动旋转及Flutter按钮控制屏幕方向实现方法

一、iOS和Android系统禁用自动旋转功能 #

iOS系统 #

• 打开控制中心：从屏幕右上角下拉（iPhone X及以后机型），找到竖排方向锁定图标（带锁的旋转箭头），点击点亮即可固定当前屏幕方向，设备旋转时不会自动切换。
• iPad用户也可进入「设置」→「显示与亮度」，开启「竖排方向锁定」选项。

Android系统 #

• 打开快捷设置面板：从屏幕顶部下拉，找到「自动旋转」图标，点击关闭（图标变为锁定状态或变暗），即可禁用自动旋转。
• 部分机型需进入「设置」→「显示」→「自动旋转屏幕」，关闭对应开关。

二、Flutter中实现按钮控制屏幕方向，禁用传感器触发的自动旋转 #

要实现仅通过按钮切换方向、忽略设备传感器的旋转，可通过SystemChrome锁定屏幕方向，结合状态管理控制组件展示，具体步骤如下：

1. 导入依赖包 #

import 'package:flutter/services.dart';

2. 完整实现代码 #

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

  @override
  State<OrientationControlPage> createState() => _OrientationControlPageState();
}

class _OrientationControlPageState extends State<OrientationControlPage> {
  // 记录当前屏幕方向状态
  Orientation _currentOrientation = Orientation.portrait;

  @override
  void initState() {
    super.initState();
    // 初始化时锁定竖屏，禁用传感器旋转
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
  }

  // 按钮触发的方向切换逻辑
  void _switchOrientation() {
    setState(() {
      if (_currentOrientation == Orientation.portrait) {
        _currentOrientation = Orientation.landscape;
        // 锁定横屏方向
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.landscapeLeft,
          DeviceOrientation.landscapeRight,
        ]);
      } else {
        _currentOrientation = Orientation.portrait;
        // 锁定竖屏方向
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.portraitUp,
        ]);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自定义方向控制')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 根据当前方向展示对应组件
            _currentOrientation == Orientation.portrait
                ? const Text('竖屏专属内容')
                : const Text('横屏专属内容'),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: _switchOrientation,
              child: Text(
                _currentOrientation == Orientation.portrait
                    ? '切换至横屏'
                    : '切换至竖屏',
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 页面销毁后恢复系统默认的自动旋转设置（可选操作）
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
    super.dispose();
  }
}

核心逻辑说明 #

• 通过SystemChrome.setPreferredOrientations设置允许的屏幕方向列表：当仅传入单个方向时，系统会锁定该方向，设备传感器的旋转不会触发方向切换。
• 点击按钮时更新状态变量_currentOrientation，并切换锁定的方向列表，同时根据该变量展示对应组件。
• 在dispose方法中恢复系统默认的自动旋转设置，避免影响其他页面的方向行为（可根据需求选择是否保留）。

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