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

Question

Flutter应用程序会对系统大文本作出反应，从而使所有“文本”小部件都变得非常大。 我想限制TextWidget的textScaleFactor，但我想在全局范围内而不是在我使用的每个Text窗口中。

现在启用大文本后，出现类似

的异常

  

颤振：══╡渲染库引起的异常   ╞═════════════════════════════════════════════════ ════════扑：   在布局期间引发了以下消息：flutter：一个RenderFlex   底部溢出14个像素。

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

Answer 1

您可以设置一个不需要扩展的限制，就像某些Apple应用程序一样。

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;
}

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

1. 返回缩放的textSize，直到未达到特定的缩放比例为止，这由第二个maxScaleFactor参数设置：

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

例如，它可以用于已经很大的标题，而无需增加更多。

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

Answer 2

此解决方案是在Google IO 2019期间提出的

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