在 Flutter 开发中，文本是最基本的 UI 元素之一。无论是简单的标题，还是复杂的富文本展示，Flutter 提供了强大的 Text 和相关的样式工具来满足开发需求。本教程将深入介绍 Text、TextStyle、TextSpan、DefaultTextStyle 及字体等内容，帮助你更好地掌握文本和样式的应用。

Text 组件介绍

Text 是 Flutter 中最基本的显示文本的组件，几乎所有的文本展示都可以通过 Text 来实现。

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Text 示例')),body: Center(child: Text('这是一个简单的文本'),),),);}
}

在这个例子中，Text 组件用于展示一行简单的文本。Text 的构造函数接收一个 String 类型的文本，并将其显示在屏幕上。

TextStyle：文本样式

要控制文本的样式（如字体大小、颜色、字重等），需要使用 TextStyle。TextStyle 是 Text 组件的 style 属性，用于定义文本的外观。

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('TextStyle 示例')),body: Center(child: Text('样式化文本',style: TextStyle(fontSize: 24,            // 字体大小color: Colors.blue,       // 字体颜色fontWeight: FontWeight.bold, // 字体粗细letterSpacing: 2.0,       // 字母间距wordSpacing: 5.0,         // 单词间距),),),),);}
}

在这个示例中，TextStyle 的使用使得文本显示有了更多的自定义控制。常用的属性包括：

• fontSize：控制字体大小。
• color：设置字体颜色。
• fontWeight：设置字体粗细。
• letterSpacing：设置字母间距。
• wordSpacing：设置单词间距。

TextStyle 其他常用属性

• fontStyle：用于设置斜体文本，使用 FontStyle.italic。
• decoration：用于设置文本装饰，比如下划线、删除线等，使用 TextDecoration。
  • TextDecoration.none：无装饰。
  • TextDecoration.underline：下划线。
  • TextDecoration.lineThrough：删除线。
• backgroundColor：用于设置文本的背景颜色。
• height：用于控制文本的行高（以倍数形式设置）。

TextSpan：富文本

Text 组件虽然简单易用，但它无法处理一个文本中不同部分有不同样式的情况。对于这种需求，Flutter 提供了 TextSpan 和 RichText 组件，用于实现富文本（multiple styles in one text）。

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('TextSpan 示例')),body: Center(child: RichText(text: TextSpan(text: '这是普通文本，',style: TextStyle(fontSize: 18, color: Colors.black),children: <TextSpan>[TextSpan(text: '这是加粗文本，',style: TextStyle(fontWeight: FontWeight.bold),),TextSpan(text: '这是红色且加粗的文本。',style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),),],),),),),);}
}

在这个示例中，我们使用了 RichText 组件来渲染由 TextSpan 构成的富文本：

• RichText 用于承载 TextSpan 对象，TextSpan 可以定义不同的样式。
• children 属性允许你嵌套不同的 TextSpan，以实现不同的样式。

DefaultTextStyle：全局文本样式

如果应用中需要为某个特定区域内的所有文本都使用相同的样式，可以使用 DefaultTextStyle。它允许我们为子树中的所有 Text 组件指定一个默认的样式。

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('DefaultTextStyle 示例')),body: DefaultTextStyle(style: TextStyle(fontSize: 20.0,color: Colors.purple,fontWeight: FontWeight.bold,),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('这是一个文本'),Text('这是另一个文本'),Text('这个文本也使用相同样式'),],),),),);}
}

在这个示例中，DefaultTextStyle 为 Column 中的所有 Text 组件设置了相同的默认样式。子树中的 Text 组件会继承这个样式，除非显式设置了其他样式。

字体设置

除了使用系统默认的字体之外，Flutter 也允许我们在项目中使用自定义字体。要使用自定义字体，需要在项目的 pubspec.yaml 文件中进行配置。

1. 首先，将字体文件（例如 .ttf 文件）放置在项目的 assets/fonts/ 目录下。

2. 在 pubspec.yaml 文件中添加字体配置：

flutter:fonts:- family: CustomFontfonts:- asset: assets/fonts/CustomFont-Regular.ttf

3. 在代码中使用自定义字体：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('自定义字体示例')),body: Center(child: Text('这是使用自定义字体的文本',style: TextStyle(fontFamily: 'CustomFont', fontSize: 24),),),),);}
}

在这个示例中，我们配置了一个名为 CustomFont 的自定义字体，并在 TextStyle 中通过 fontFamily 属性引用该字体。

总结

Flutter 提供了强大且灵活的文本和样式支持，通过 Text 组件可以轻松显示简单的文本，结合 TextStyle 可以自定义文本的外观。而 TextSpan 和 RichText 提供了实现富文本的能力，可以在同一个文本中展示不同的样式。使用 DefaultTextStyle 可以全局控制文本样式，简化代码中的重复样式设置。最后，通过配置 pubspec.yaml 文件，你还可以轻松使用自定义字体，为应用增添个性化的文本展示。

随着你对这些基础组件的掌握，文本展示将成为你构建用户界面时的重要工具，帮助你实现多样化的 UI 设计。