如何将 Flutter 的 `TextScaler` 一致地应用到所有（Flutter 内置）小部件？或者跨界放大所有渲染？

Question

我是 Flutter 新手，目标主要是使用它来制作桌面应用程序（Linux、Win、Mac），来自同一代码库的平板电脑/Web 版本是未来的优先事项，而不是当前的优先事项。

嗯，我的 KDE 系统（1920x1200，14 英寸屏幕）上的一个简单的 hello-worldish“文档驱动”入门应用程序默认显示的字体大小太小，除了应用程序栏标题之外：

标准入门级内容：这是一个根 StatelessWidget，在其

build

中返回一个

MaterialApp

，其中

home: Scaffold(...)

具有

appBar: AppBar(...)

、

body: Text(...)

和

bottomNavigationBar: BottomNavigationBar(...)

。到目前为止，还没有应用任何字体大小自定义。让我们忽略底部导航栏不一致的字体大小（我猜这一定是某人设计的），但重点关注这样一个事实：相对于 KDE 桌面设置的其余部分，文本和底部导航栏的字体大小至少太小了。很小。

现在我的想法是在应用程序中设置一个用户可以设置的文本比例设置，并且该设置将自动应用于所有 Flutter 内置文本渲染小部件的所有文本呈现。根据研究，我认为像这样使用

TextScaler

就可以解决问题：

  Widget build(BuildContext context) {
    TextScaler textScaler = const TextScaler.linear(2.0); // later user-settable

// ... setup `MaterialApp materialApp` with children here...

    return MediaQuery(
      data: MediaQuery.of(context).copyWith(textScaler: textScaler),
      child: materialApp,
    );

但结果很奇怪：

• 底部导航栏按钮显然不适用于父 TextScaler
• 应用栏标题仅缩放了一点，但不是“2x”，只有

  Text

  正确缩放了“2x”

如果 MediaQuery 的父级不是 MaterialApp，而是它的

home: Scaffold(...)

顺便说一句，同样的结果。

有谁知道如何在不微调所有单独的 fontSize 设置的情况下“全面”缩放？

（想一想，即使是“不仅缩放文本，还缩放所有内容、图像图标等”一步式机制对我来说就很好 - 考虑到所有因素，也许甚至更可取）。

Answer 1

尝试重现相同的问题后，我能够通过确保

MediaQuery

小部件包裹 整个

MaterialApp

来修复它。

  Widget build(BuildContext context) {
    TextScaler textScaler = const TextScaler.linear(1.1);
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(textScaler: textScaler),
      child: const MaterialApp(home: MyWidget()),
    );
  }

MyWidget

包含

Scaffold

，其中还有

appBar

和

bottomNavigationBar

。他们都受到

textScaler

的影响。