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

Question

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

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

这样的异常

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ flutter: The following message was thrown during layout: flutter: A RenderFlex overflowed by 14 pixels on the bottom.

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

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

始终returns固定文本大小，对于任何 textScaleFactor:

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

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

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

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

这可以用于例如已经很大的 headers，您不需要再增加它们。

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

Answer 3

要在您的应用中限制 所有页面 的 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,

      //...
    ),
  );
}

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

How to manage global textScaleFactor in Flutter app properly?

font-size

dart

flutter