Flutter如何全局定义textScaler？解决逐个配置及键盘失效问题

问题描述 #

我正在优化应用可读性，适配启用设备大文本无障碍功能的用户。我知道Text组件有textScaler参数（原textScaleFactor），但不确定是否需要给每个Text组件都配置这个参数？

另外我尝试用MediaQuery包裹MaterialApp，在data里给textScaler赋值1.2，但这么做会导致用户无法使用键盘，代码如下：

@override
Widget build(BuildContext context) {
  return MediaQuery(
    data: MediaQuery.of(context).copyWith(
      textScaler: const TextScaler.linear(1.2),
    ),
    child: MaterialApp.router(...

解决方案 #

1. 无需为每个Text组件单独配置textScaler #

Flutter的MediaQuery会自动将系统的文本缩放设置传递给所有子组件的Text，默认情况下Text会继承当前上下文的textScaler值。只要你的应用正确使用了MaterialApp/CupertinoApp（它们内部已经包含了MediaQuery），所有Text都会自动响应系统的大文本设置，不需要逐个配置。

2. 修复MediaQuery包裹MaterialApp导致的键盘问题 #

你这么做导致键盘失效的原因是：在MaterialApp外层包裹MediaQuery时，直接用copyWith覆盖textScaler会丢失原MediaQuery中与键盘相关的参数。正确的做法是保留原MediaQuery的所有数据，只修改textScaler：

@override
Widget build(BuildContext context) {
  final originalMediaQuery = MediaQuery.of(context);
  return MediaQuery(
    data: originalMediaQuery.copyWith(
      textScaler: TextScaler.linear(
        // 可基于系统原有缩放值调整，比如乘以系数，或直接设置固定值
        originalMediaQuery.textScaler.scale(1.0) * 1.2,
      ),
    ),
    child: MaterialApp.router(...

如果只是想让应用跟随系统的大文本设置，完全不需要手动设置textScaler，MaterialApp会自动处理。只有当你需要在系统缩放基础上额外调整比例时，才需要用上述方式修改。

3. 额外注意事项 #

• 对于图标旁的小字、按钮文本这类特殊文本，如果不希望跟随系统缩放，可以单独给对应的Text组件设置textScaler: const TextScaler.linear(1.0)来固定缩放比例。
• 测试时记得开启设备的大文本无障碍功能（比如iOS的「更大字体」、Android的「字体大小」），验证所有文本的缩放效果和交互是否正常。

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