当前版本 Flutter 3.19.5

前言

TextTheme用于定义应用程序中文本样式的集合。它包含了一系列预定义的文本样式，如标题、副标题、正文等，每种文本样式都有不同的字体、大小、颜色等属性。通过使用TextTheme，我们可以方便地在应用程序中统一管理和应用文本样式，以确保整个应用程序的一致性和美观性。

ThemeData API

属性

常用属性

• displayLarge: 最大的显示样式
• displayMedium: 中等的显示样式
• displaySmall: 最小的显示样式
• headlineLarge: 最大的头条样式
• headlineMedium: 中等的头条样式
• headlineSmall: 最小的头条样式
• titleLarge: 最大的标题样式
• titleMedium: 中等的标题样式
• titleSmall: 最小的标题样式
• labelLarge: 最大的标签样式
• labelMedium: 中等的标签样式
• labelSmall: 最小的标签样式
• bodyLarge: 最大的正文样式
• bodyMedium: 中等的正文样式
• bodySmall: 最小的正文样式

displayLarge: 最大的显示样式

作为屏幕上最大的文本，显示样式是为简短、重要的文本或数字保留的。它们在大屏幕上效果最佳。

displayMedium/displaySmall 参考displayLarge的解释和示例

实现

final TextStyle? displayLarge;

示例

// 设置文本样式
TextTheme(
  displayLarge: TextStyle(fontSize: 24, color: Colors.red), // 自定义最大的显示样式
),

// 使用文本样式
Text('测试文本AA', style: Theme.of(context).textTheme.displayLarge),

完整的TextStyle用法详解

效果

headlineLarge: 最大的头条样式

头条样式比显示样式小。它们最适合在较小的屏幕上显示简短、强调重点的文本。

headlineLarge/headlineMedium/headlieSmall 参考displayLarge的示例和效果

titleLarge: 最大的标题样式

标题比头条样式小，应用于较短、中等强调的文本。

titleLarge/titleMedium/titleSmall 参考displayLarge的示例和效果

labelLarge: 最大的标签样式

标签样式是较小的实用样式，用于 UI 区域，例如组件内部的文本或内容正文中非常小的支持文本（如标题）。

用于ElevatedButton、TextButton和OutlinedButton上的文本

labelLarge/labelMedium/labelSmall 参考displayLarge的示例和效果

bodyLarge: 最大的正文样式

正文样式用于较长的文本段落

bodyLarge/bodyMedium/bodySmall 参考displayLarge的示例和效果

方法

• apply: 创建此文本主题的副本，但在每个单独的文本样式中替换给定字段
• copyWith: 创建此文本主题的副本，但将给定字段替换为新值
• debugFillProperties
• merge: 通过合并创建一个新的TextTheme

apply: 创建此文本主题的副本，但在每个单独的文本样式中替换给定字段

displayColor 适用于 displayLarge、displayMedium、 displaySmall、headerLarge、headerMedium和bodySmall。 bodyColor 适用于其余文本样式。

示例

ThemeData(
  textTheme: Theme.of(context).textTheme.apply(
    bodyColor: Colors.pinkAccent,
    displayColor: Colors.pinkAccent,
  )
)

copyWith: 创建此文本主题的副本，但将给定字段替换为新值

当您想要合并 TextTheme 的所有字段而不是单个字段时，使用merge而不是copyWith

示例

ThemeData(
  textTheme: Theme.of(context).textTheme.copyWith(
    displayLarge: TextStyle(fontSize: 24, color: Colors.red), // 自定义最大的显示样式
  )
)

merge: 通过合并创建一个新的TextTheme

示例

ThemeData(
  textTheme: Theme.of(context).textTheme.merge(
    TextTheme(
      displayLarge: TextStyle(fontSize: 24, color: Colors.red), // 自定义最大的显示样式)
    )
  )
)

...完结...