Flutter中OrientationBuilder横竖屏切换时UI不更新的问题

你的问题核心大概率出在ResponsiveFunctions的实现和调用方式上，以下是具体的修复步骤：

1. 修复ResponsiveFunctions的实现与调用 #

你当前的代码中调用ResponsiveFunctions.responsiveWidth(10)时没有传入context，这意味着工具类无法获取实时的屏幕尺寸，只会使用初始化时的固定值，导致横竖屏切换后布局参数不更新。

修改ResponsiveFunctions，让它依赖当前上下文获取实时屏幕尺寸：

class ResponsiveFunctions {
  static double responsiveWidth(BuildContext context, double percentage) {
    return MediaQuery.of(context).size.width * (percentage / 100);
  }

  static double responsiveHeight(BuildContext context, double percentage) {
    return MediaQuery.of(context).size.height * (percentage / 100);
  }
}

然后在OrientationBuilder中调用时传入context：

OrientationBuilder(
  builder: (context, orientation) {
    bool isLandscape = orientation == Orientation.landscape;
    return Padding(
      padding: isLandscape
          ? EdgeInsets.only(
              left: ResponsiveFunctions.responsiveWidth(context, 10),
              top: ResponsiveFunctions.responsiveHeight(context, 52),
              right: ResponsiveFunctions.responsiveWidth(context, 10),
              bottom: ResponsiveFunctions.responsiveHeight(context, 3))
          : EdgeInsets.only(
              left: ResponsiveFunctions.responsiveWidth(context, 16),
              top: ResponsiveFunctions.responsiveHeight(context, 42),
              right: ResponsiveFunctions.responsiveWidth(context, 16),
              bottom: ResponsiveFunctions.responsiveHeight(context, 10)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                // Additional widgets here
              ),
            ],
          ),
        ],
      ),
    );
  },
);

2. 排查父组件的const修饰 #

如果OrientationBuilder的父组件使用了const修饰，会导致父组件无法重建，进而让OrientationBuilder无法感知方向变化。检查父组件代码，移除不必要的const关键字。

3. 确认应用的横竖屏配置 #

确保你的应用允许横竖屏切换：

• Android：在AndroidManifest.xml中给对应Activity设置android:screenOrientation="sensor"
• iOS：在Info.plist中添加UISupportedInterfaceOrientations，包含竖屏和横屏的方向选项

替代方案：直接使用MediaQuery计算布局 #

如果不想依赖自定义工具类，可以直接在OrientationBuilder中通过MediaQuery获取实时尺寸，这样更直观且不易出错：

OrientationBuilder(
  builder: (context, orientation) {
    final screenSize = MediaQuery.of(context).size;
    bool isLandscape = orientation == Orientation.landscape;
    return Padding(
      padding: isLandscape
          ? EdgeInsets.only(
              left: screenSize.width * 0.1,
              top: screenSize.height * 0.52,
              right: screenSize.width * 0.1,
              bottom: screenSize.height * 0.03)
          : EdgeInsets.only(
              left: screenSize.width * 0.16,
              top: screenSize.height * 0.42,
              right: screenSize.width * 0.16,
              bottom: screenSize.height * 0.1),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                // Additional widgets here
              ),
            ],
          ),
        ],
      ),
    );
  },
);

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