【Flutter】基础组件：文本及样式
在 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 {
Widget 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 {
Widget 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 {
Widget 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 {
Widget 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 文件中进行配置。
-
首先，将字体文件（例如
.ttf文件）放置在项目的assets/fonts/目录下。 -
在
pubspec.yaml文件中添加字体配置：
flutter:
fonts:
- family: CustomFont
fonts:
- asset: assets/fonts/CustomFont-Regular.ttf
- 在代码中使用自定义字体：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
Widget 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 设计。