当前版本 Flutter 3.19.5
前言
TextTheme用于定义应用程序中文本样式的集合。它包含了一系列预定义的文本样式,如标题、副标题、正文等,每种文本样式都有不同的字体、大小、颜色等属性。通过使用TextTheme,我们可以方便地在应用程序中统一管理和应用文本样式,以确保整个应用程序的一致性和美观性。
属性
常用属性
- 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),
效果
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), // 自定义最大的显示样式) ) ) )
...完结...
《Flutter入门:TextTheme详解》留言数:0