Flutter TextTheme：哪个 Texttheme 属性适用于哪些小部件？

Question

我对 flutter 相当陌生，并且正在摆弄主题数据，特别是 TextTheme。我正在阅读官方文档这里和 TextTheme 文档这里的主题。

当我尝试更改不同的字体大小和样式时，我不确定哪些 TextTheme 属性影响哪些小部件。只有通过列出所有属性（从 displayLarge 到 bodySmall），我才弄清楚哪个属性会自动影响哪些小部件。

我想问一下这方面有备忘单吗？或者我在文档中遗漏了一些东西。

之前曾问过类似的问题here，但并没有真正回答我的问题。

如有任何建议，我们将不胜感激，谢谢！

Answer 1

假设您创建了一个主题，如下所示

var dartTheme = ThemeData.dark().copyWith(
 textTheme: TextTheme(
   titleLarge: TextStyle(
    color: Colors.red,
    fontWeight: FontWeight.w400,
    fontSize: 16.0,
   ),
   titleMedium: TextStyle(
     color: Colors.blue,
     fontWeight: FontWeight.w500,
     fontSize: 14.0,
   ),
 ),
);

然后您将这些值传递到您的顶级

MaterialApp

小部件。

但是，这不会立即开始应用样式，因为 flutter 不知道哪个 Text 小部件应该有

titleLarge

以及哪个应该有

titleMedium

。

为了应用这些样式，您必须在文本小部件中使用它们。

例如，如果您有一个负责显示标题的小部件，

@override
Widget build(BuildContext context) {
  return Text(
    'Heading Text',
    style: Theme.of(context).textTheme.titleLarge,
  );
}

您可能会遇到一些场景，您需要主题中的一些样式和一些自定义样式（例如字体颜色）。

@override
Widget build(BuildContext context) {
  return Text(
    'Heading Text',
    style: Theme.of(context).textTheme.titleLarge!.copyWith(
      color: Colors.green,
    ),
  );
}

注意

!

后面的titleLarge