Flutter应用在iOS/Android端随系统放大显示字体时UI错乱、文本不受控解决方法问询

问题根因：1.22.6稳定版中，TextField的默认文本渲染逻辑会叠加系统textScaleFactor计算最终字号，即便开发者显式设置了style.fontSize，实际渲染值依然为「自定义字号 * 系统字体缩放比例」。当用户将系统字体调整至最大档位时，全界面元素会因字号被过度放大触发溢出、布局崩坏，完全不受自定义字号的控制。

实现步骤 #

• 全局切断系统字体缩放传递路径
  在应用根MaterialApp组件的builder方法中，强制将MediaQuery的textScaleFactor固定为1.0，从渲染树的最顶层屏蔽系统字体设置的影响，代码示例：

  MaterialApp(
    builder: (context, child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(
          textScaleFactor: 1.0,
        ),
        child: child!,
      );
    },
    // 原有路由、主题、入口配置保持不变
  )
  

• TextField组件双保险校验
  1.22.6版本存在局部组件绕过全局MediaQuery读取系统缩放值的已知问题，需单独给每个TextField的style属性补充固定缩放配置，避免默认文本样式复用逻辑带入系统缩放值：

  TextField(
    style: TextStyle(
      fontSize: 14, // 替换为项目实际需求的固定字号
      textScaleFactor: 1.0, // 显式固定缩放比例
    ),
    // 原有输入框配置保持不变
  )
  

• iOS端原生层拦截配置
  为避免iOS系统的动态字体偏好通过原生通道传递到Flutter引擎，需在ios/Runner/Info.plist中补充固定内容尺寸档位的配置：

  <!-- 关闭动态字体偏好自动同步，固定为大字体默认档位 -->
  <key>UIPreferredContentSizeCategoryName</key>
  <string>UIContentSizeCategoryLarge</string>
  

• Android端原生层拦截配置
  为避免Android系统的字体大小变更通过Configuration回调覆盖Flutter配置，需在android/app/src/main/AndroidManifest.xml的application节点中声明监听字体缩放配置变更，由App层统一拦截处理：

  <application
    android:configChanges="fontScale|orientation|screenSize"
    <!-- 其余原有Manifest配置保持不变 -->
  >
  

适配说明 #

• 上述方案完全匹配当前开发环境（Flutter 1.22.6 / Dart 2.10.5 / Xcode 12.4 / Android SDK 30.0.3），无版本兼容性问题，不需要升级SDK或开发工具版本。
• 配置全部生效后，全应用所有文本元素的渲染尺寸将完全固定为开发者设置的静态值，不会随系统字体档位调整发生变化，可直接复现验证最大字体档位下的布局稳定性。
• 该方案暂不包含无障碍字体适配逻辑，若后续需要支持无障碍场景，可移除根层级的全局textScaleFactor固定配置，单独保留TextField的局部字号约束即可实现差异化适配。

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