Flutter横竖屏布局切换异常：设备旋转时布局不自动更新如何解决？

核心问题原因 #

• 布局函数上下文缺失：你当前定义的portraitLayout、landscapeLayout是State类之外的全局函数，无法访问State持有的BuildContext对象，因此在函数内调用MediaQuery.of(context)会抛出上下文类型不匹配的错误。
• 方向变化监听逻辑不完善：仅通过MediaQuery获取宽高判断方向，部分场景下无法自动触发组件重建，且需要先确认原生端已开放横竖屏旋转权限。
• 组件拼写错误：你代码中用到的Centre为拼写错误，Flutter内置的居中组件正确写法为Center。

具体修复方案 #

1. 调整布局函数位置+改用OrientationBuilder监听方向 #

把两个布局函数移入State类内部，同时用OrientationBuilder替代手动宽高判断，它会自动在设备方向变化时触发重建，无需额外手动刷新：

class UserInstructions extends StatefulWidget {
  const UserInstructions({Key? key}) : super(key: key);
  @override
  _UserInstructionsState createState() => _UserInstructionsState();
}

class _UserInstructionsState extends State<UserInstructions> {
  // 布局函数移入State类内部，可直接访问上下文
  Scaffold portraitLayout() {
    return Scaffold(
      // 你原有竖屏布局逻辑
      body: Center(
        // ...
      ),
    );
  }

  Scaffold landscapeLayout() {
    return Scaffold(
      // 你原有横屏布局逻辑
      body: Center(
        // ...
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // OrientationBuilder自动监听方向变化触发重建
    return OrientationBuilder(
      builder: (context, orientation) {
        if (orientation == Orientation.portrait) {
          return portraitLayout();
        } else {
          return landscapeLayout();
        }
      },
    );
  }
}

2. 确认原生端旋转权限开放 #

如果修改代码后旋转设备仍无响应，检查原生端的方向配置：

• Android端：打开android/app/src/main/AndroidManifest.xml，找到MainActivity对应的<activity>节点，移除固定方向的配置，或添加android:screenOrientation="fullSensor"允许所有方向旋转。
• iOS端：打开ios/Runner/Info.plist，找到UISupportedInterfaceOrientations数组，确保同时包含竖屏、横屏对应的枚举值。

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