使用“Text.rich()”或“RichText”导致 flutter 出现字体大小问题

Question

我使用Text.rich()或 的RichText字体大小为 25。但是 的大小RichText看起来比Text.rich()我为两个小部件指定的大小不同，请告诉我为什么大小不同font Size 25。

此代码显示小字体：

runApp(MaterialApp(
    theme: ThemeData(fontFamily: "nunito"),
    home: Scaffold(
      appBar: AppBar(title: Text("PUROGRAMMER")),
      body: Center(child: Container(
        child: Text.rich(
         TextSpan(
           style: TextStyle(fontSize: 20, color: Colors.grey),
           children: [
                  TextSpan(text: "Click"),
                  TextSpan(text: " + ", style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
                  TextSpan(text: "to add")
           ]
         )
         )),)
    ),
  ));

这显示了大字体：

runApp(MaterialApp(
    theme: ThemeData(fontFamily: "nunito"),
    home: Scaffold(
      appBar: AppBar(title: Text("PUROGRAMMER")),
      body: Center(child: Container(
        child: TRichText(
         text: TextSpan(
           style: TextStyle(fontSize: 20, color: Colors.grey),
           children: [
                  TextSpan(text: "Click"),
                  TextSpan(text: " + ", style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
                  TextSpan(text: "to add")
           ]
         )
         )),)
    ),
  ));

Answer 1

在文本小部件的构造函数中，textScaleFactor参数未初始化。在build方法中，如果textScaleFactor没有初始化，则MediaQuery.textScaleFactorOf(context)使用。

在小部件的构造函数中，方法中的RichText参数直接使用，而不需要回退到。textScaleFactor = 1.0createRenderObject/updateRenderObjectMediaQuery.textScaleFactorOf(context)

最重要的是，你可以这样解决这个问题：

1. 使用

final tsf = MediaQuery.of(context).textScaleFactor

到

RichText(textScaleFactor: tsf)。

2. 使用Text.rich()

更新：textScaleFactor被标记为已弃用，并带有以下评论：

请改用 textScaler。为了准备即将推出的非线性文本缩放支持，不推荐使用 textScaleFactor。此功能在 v3.12.0-2.0.pre 之后已弃用。

此外，现在MediaQuery.of每个跟踪字段都有优化的调用。所以现在你可以这样做：

@override
Widget build(BuildContext context) {
  final textScaler = MediaQuery.textScalerOf(context);
  return RichText(text: ..., textScaler: textScaler);
}

Answer 2

如果RichText您没有显式定义文本样式的所有属性，它将复制有关文本位置的样式，例如在白色背景的Columna 中定义 a和，您将看到那是漆成白色的；或者，如果您仅为属性声明样式，则 s 也会复制该样式。\n因此您看到的差异很可能是由于它们的原因，为两者定义相同的样式，看看它们看起来是否相同。ScaffoldText.RichRichTextRichTexttextchildren TextSpanfontWeight

\n

提供代码片段后更新：

\n

这是我在一列中运行两个容器的结果：

\n

\n

但如果你删除这color: Colors.grey两个小部件，这就是我得到的（TextRich变成白色）：

\n

\n

但如果你把它们放在appbar这样的位置：

\n

AppBar(\n    \n    title: Column(\n      children: [\n        Container(\n          child:\n              Text.rich(TextSpan(style: TextStyle(fontSize: 20), children: [\n            TextSpan(text: "Click"),\n            TextSpan(\n                text: " + ",\n                style: TextStyle(\n                    color: Colors.red, fontWeight: FontWeight.bold)),\n            TextSpan(text: "to add")\n          ])),\n        ),\n        Container(\n          child: RichText(\n              text: TextSpan(style: TextStyle(fontSize: 20), children: [\n            TextSpan(text: "Click"),\n            TextSpan(\n                text: " + ",\n                style: TextStyle(\n                    color: Colors.red, fontWeight: FontWeight.bold)),\n            TextSpan(text: "to add")\n          ])),\n        )\n      ],\n    ),\n  ),\n

\n

这就是你得到的：\n

\n

正如您所看到的，它们都变成白色，因为它是应用程序栏的默认文本颜色，但它们有不同，fontWeight那是因为RichText复制了应用程序栏样式的默认值fontWeight，但是如果您fontWeight在子级中声明textstyle如下：

\n

AppBar(\n    title: Column(\n      children: [\n        Container(\n          child: Text.rich(TextSpan(\n              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),\n              children: [\n                TextSpan(text: "Click"),\n                TextSpan(\n                    text: " + ",\n                    style: TextStyle(\n                        color: Colors.red, fontWeight: FontWeight.bold)),\n                TextSpan(text: "to add")\n              ])),\n        ),\n        Container(\n          child: RichText(\n              text: TextSpan(\n                  style:\n                      TextStyle(fontSize: 20, fontWeight: FontWeight.bold),\n                  children: [\n                TextSpan(text: "Click"),\n                TextSpan(\n                    text: " + ",\n                    style: TextStyle(\n                        color: Colors.red, fontWeight: FontWeight.bold)),\n                TextSpan(text: "to add")\n              ])),\n        )\n      ],\n    ),\n  ),\n

\n

这就是你得到的：

\n

\n