如何在 Flutter 应用程序中正确管理全局 textScaleFactor？

Question

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

现在启用大文本后，我得到了像

扑腾：？？？通过渲染库捕获的异常 ????????????????????????????????????????????? ???????????? 颤振：布局期间抛出以下消息：颤振：底部的 RenderFlex 溢出了 14 个像素。

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

Answer 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将使您的设计始终遵循您fontSize的设计。

Answer 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 个函数来计算不同情况的大小。

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

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

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

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

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

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

我希望这可以帮助您为视障人士制作优秀的应用程序，同时仍然保持它们的美观。