如何正确管理 Flutter 应用中的全局 textScaleFactor？答案

【问题标题】：How to manage global textScaleFactor in Flutter app properly?如何正确管理 Flutter 应用中的全局 textScaleFactor？
【发布时间】：2019-09-25 19:45:25
【问题描述】：

Flutter 应用程序对系统大文本做出反应，使所有 Text 小部件都非常大。我想限制 Text 小部件的 textScaleFactor，但我想在全局范围内而不是在我正在使用的每个 Text 小部件中进行。

现在启用大文本后出现异常

flutter: ══╡ 渲染库发现异常 ╞═════════════════════════════════════════════════ ════════颤动：布局期间抛出以下消息：flutter: A RenderFlex 底部溢出 14 个像素。

什么是正确的方法？一种方法是创建一些包装小部件而不是使用 Text，但也许可以通过其他方式解决？

【问题讨论】：

标签： flutter dart font-size

【解决方案1】：

此解决方案在Google I/O'19（大约 20 分钟）期间提出：

MaterialApp(
  builder: (BuildContext context, Widget child){
    final MediaQueryData data = MediaQuery.of(context);
    return MediaQuery(
      data: data.copyWith(
        textScaleFactor: data.textScaleFactor * (_isPassive ? 2 : 1)
      ),
      child: child,
    );
  },

如果您希望所有内容都有一个固定的textScaleFactor，您可以将data.textScaleFactor * (_isPassive ? 2 : 1) 替换为一个数字。 1.0 将使您的设计始终遵循您的 fontSizes。

【讨论】：

_isPassive - 他们在这个变量中存储了什么？
youtube.com/watch?v=YSULAJf6R6M 20:00 他们谈论与内容交互的被动方式（例如：电视）
有没有办法为所有页面全局设置这个？据我所知，此方法确保 textScaleFactor 仅适用于该屏幕/页面的小部件树。

【解决方案2】：

您可以设置一个限制，之后您就不需要像某些苹果应用程序那样进行扩展。

MaterialApp(
  builder: (BuildContext context, Widget child) {
    final MediaQueryData data = MediaQuery.of(context);
    return MediaQuery(
      data: data.copyWith(
        textScaleFactor: data.textScaleFactor > 2.0 ? 2.0 : data.textScaleFactor),
        child: child,
       );
    },
  debugShowCheckedModeBanner: false,
  title: 'Flutter app',
)

另外，我添加了 2 个函数来计算不同情况的大小。

对于任何 textScaleFactor 始终返回固定的文本大小：

double getFixedSize(double textSize) {
  return textScaleFactor != 1.0 ? textSize / textScaleFactor : textSize;
}

例如，您可以将其用于应用标题文本。

返回缩放后的 textSize 直到未达到特定比例，该比例由第二个 maxScaleFactor 参数设置：

double getScaledOrMaxSize(double textSize, double maxScaleFactor) {
 return textScaleFactor > maxScaleFactor
   ? textSize * maxScaleFactor / textScaleFactor
   : textSize;
}

这可以用于例如已经很大并且您不需要进一步增加它们的标题。

我希望这可以帮助您为视障人士制作出色的应用，同时让他们保持美丽。

【讨论】：

【解决方案3】：

要在您的应用中限制 ALL PAGES 的 textScaleFactor，您可以这样做。

用MediaQuery 小部件包装您的MaterialApp，并使用从window 创建的所需MediaQueryData 数据。

并将useInheritedMediaQuery 设置为true。

@override
Widget build(BuildContext context) {
  MediaQueryData windowData =
      MediaQueryData.fromWindow(WidgetsBinding.instance!.window);
  windowData = windowData.copyWith(
    textScaleFactor:
        windowData.textScaleFactor > 1.4 ? 1.4 : windowData.textScaleFactor,
  );
  return MediaQuery(
    data: windowData,
    child: MaterialApp(
      useInheritedMediaQuery: true,

      //...
    ),
  );
}

【讨论】：

只是想注意将useInheritedMediaQuery设置为true。在我们的应用中，当键盘显示时，它会导致确定屏幕高度的问题。