使用 `Text.rich()` 或 `RichText` 时出现的字体大小问题

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

参数未初始化。在构建方法中，如果

textScaleFactor

未初始化，则使用

MediaQuery.textScaleFactorOf(context)

。

在

RichText

小部件的构造函数中，参数

textScaleFactor = 1.0

在

createRenderObject/updateRenderObject

方法中直接使用，无需回退到

MediaQuery.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

中，如果您没有明确定义文本样式的所有属性，它将复制有关文本位置的样式，例如在白色背景的

Column

中的

Scaffold

中定义一个

Text.Rich

并

RichText

，你会看到

RichText

被涂成了白色；或者，如果您仅为

text

属性声明样式，则

children

TextSpan

也会复制该样式。 因此，您看到的差异很可能是因为它们的

fontWeight

，为两者定义相同的值，看看它们看起来是否相同。

提供代码片段后更新：

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

但是如果你删除两个小部件的

color: Colors.grey

，这就是我得到的（

TextRich

变成白色）：

但是如果你把它们放在

appbar

中，像这样：

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

这就是你得到的：

正如您所看到的，它们都变成白色，因为它是应用程序栏的默认文本颜色，但它们具有不同的

fontWeight

，那是因为

RichText

复制了应用程序栏样式的默认

fontWeight

，但是如果您在中声明

fontWeight

孩子

textstyle

像这样：

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

这就是你得到的：

Answer 3

我的应用程序中的 RichText 小部件也遇到此问题，我已在 ThemeData 中设置了字体系列，但 RichText 没有选择该字体，因此我从外部将字体系列提供给 RichText

TextStyle(
    fontFamily: "Serif",
    fontSize: 30,
    color: Colors.black,
    fontWeight: FontWeight.w400,
  )

在 RichText 中，您的样式应包含您的字体系列

或者您可以使用Text.Rich它按预期工作。