Flutter中使用OrientationBuilder如何避免键盘弹出的方向误判

OrientationBuilder的方向判定逻辑并非直接读取设备重力传感器的物理朝向，而是基于父组件分配的可用视口尺寸的宽高比计算得出。竖屏状态下弹出系统输入法键盘时，页面可用高度被键盘大幅压缩，一旦可用视口的宽度大于剩余高度，组件就会返回landscape方向值，触发横屏布局渲染。这种误判本质是组件的设计逻辑和实际业务需求错位，并非设备传感器上报数据错误。

• 替换方向读取来源：放弃直接依赖OrientationBuilder的返回值判定设备朝向，改用MediaQuery读取物理屏幕的真实方向
  • MediaQuery的orientation属性，是基于设备屏幕的物理固有尺寸计算的，计算过程中不会扣除软键盘、系统状态栏、底部导航栏等覆盖元素占用的空间。因此软键盘弹出造成的可用高度压缩，不会触发该属性的数值变化，完全匹配“仅随真实物理朝向变化切换布局”的需求。
• 保留OrientationBuilder做响应式适配时，增加物理尺寸校验
  • 如果业务需要依赖OrientationBuilder完成不同视口下的组件尺寸适配，可以在方向判断逻辑中，额外增加屏幕物理宽高的校验规则：只有当屏幕物理宽度大于物理高度时，才判定为横屏状态，直接过滤掉键盘压缩可用高度导致的比例误判。
• 业务无横屏需求时，全局锁定应用方向
  • 对于仅需要竖屏显示的应用，可以在应用启动时通过SystemChrome.setPreferredOrientations从系统层限定应用的支持方向，此时OrientationBuilder根本不会收到方向变更的通知，从根源上避免误触发布局切换。

修正后的可运行代码示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Builder(builder: (context) {
          // 读取物理屏幕真实方向，不受键盘弹出压缩视口的影响
          final realOrientation = MediaQuery.of(context).orientation;
          final widgetList = [
            Expanded(
              child: Center(
                child: Text(
                  '当前屏幕方向 : $realOrientation',
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.blue,
                child: const TextField(),
              ),
            ),
            Flexible(child: Container(color: Colors.yellow)),
          ];
          if (realOrientation == Orientation.portrait) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: widgetList,
            );
          }
          return Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: widgetList,
          );
        }),
      ),
    );
  }
}

注意：如果应用本身需要支持横竖屏切换，同时需要适配键盘弹出的布局变化，需要单独对软键盘弹出的场景做布局适配，不要将键盘压缩视口的场景和设备物理旋转的场景混用同一套判断逻辑。

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