Flutter文本及样式

封面图 • 2025-10-11 • Flutter

在 Flutter 中，文本（`Text`）是构建用户界面的重要组成部分。Flutter 提供了丰富的文本样式控制方式，包括字体大小、颜色、字体粗细、字体风格等。下面是一个全面的介绍：

---

## 一、基本使用

```dart
Text('Hello, Flutter!')
```

这是最简单的 `Text` 组件，显示一行文字。

---

## 二、常用属性

| 属性 | 类型 | 说明 |
|------|------|------|
| `data` / `child` | String | 要显示的文本内容 |
| `style` | TextStyle | 文本样式 |
| `maxLines` | int | 最大显示行数，超过会截断 |
| `overflow` | TextOverflow | 文本溢出时的处理方式（如 `TextOverflow.ellipsis`） |
| `textAlign` | TextAlign | 文本对齐方式（左、右、居中等） |
| `textDirection` | TextDirection | 文本方向（从左到右或从右到左） |

---

## 三、文本样式（TextStyle）

通过 `TextStyle` 控制文本的外观。

### 示例：

```dart
Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 20,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    fontFamily: 'Arial',
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)
```

### 常用属性：

| 属性 | 说明 |
|------|------|
| `fontSize` | 字体大小 |
| `color` | 字体颜色 |
| `fontWeight` | 字重（`FontWeight.bold`, `FontWeight.w500`, 等） |
| `fontStyle` | 字体风格（`FontStyle.normal`, `FontStyle.italic`） |
| `fontFamily` | 字体名称 |
| `decoration` | 文本装饰（下划线、删除线等） |
| `decorationColor` | 装饰颜色 |
| `decorationStyle` | 装饰样式（实线、虚线等） |

---

## 四、富文本（RichText）

如果你需要显示**不同样式的文本混合**，可以使用 `RichText`。

### 示例：

```dart
RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'Hello, ', style: TextStyle(color: Colors.green)),
      TextSpan(text: 'Flutter!', style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold)),
    ],
  ),
)
```

---

## 五、Text.rich()

`Text.rich()` 是 `RichText` 的快捷方式，用于快速创建富文本。

```dart
Text.rich(
  TextSpan(
    children: [
      TextSpan(text: 'Hello, ', style: TextStyle(color: Colors.red)),
      TextSpan(text: 'World!', style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold)),
    ],
  ),
)
```

---

## 六、TextAlign 对齐方式

| 值 | 说明 |
|----|------|
| `TextAlign.left` | 左对齐 |
| `TextAlign.center` | 居中对齐 |
| `TextAlign.right` | 右对齐 |
| `TextAlign.justify` | 两端对齐（适用于多行文本） |

---

## 七、TextOverflow 溢出处理

| 值 | 说明 |
|----|------|
| `TextOverflow.clip` | 截断文本 |
| `TextOverflow.fade` | 渐隐文本 |
| `TextOverflow.ellipsis` | 显示省略号（...） |

示例：

```dart
Text(
  'This is a very long text that will be truncated.',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)
```

---

## 八、TextDirection 文本方向

| 值 | 说明 |
|----|------|
| `TextDirection.ltr` | 从左到右（默认） |
| `TextDirection.rtl` | 从右到左（如阿拉伯语） |

---

## 九、设置全局字体（可选）

如果你想为整个应用统一设置字体，可以在 `MaterialApp` 中使用 `textTheme`：

```dart
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText1: TextStyle(fontSize: 16, fontFamily: 'MyFont'),
    ),
  ),
  home: MyApp(),
)
```

---

## 十、自定义字体（Font）

要使用自定义字体，需要：

1. 在 `pubspec.yaml` 中添加字体资源：
```yaml
flutter:
  fonts:
    - family: MyFont
      fonts:
        - asset: fonts/MyFont.ttf
```

2. 在 `TextStyle` 中使用：
```dart
TextStyle(fontFamily: 'MyFont')
```

---

## 总结

| 功能 | 组件/方法 |
|------|-----------|
| 基本文本 | `Text` |
| 富文本 | `RichText` / `Text.rich()` |
| 文本样式 | `TextStyle` |
| 字体设置 | `fontFamily` / 自定义字体 |
| 对齐方式 | `textAlign` |
| 溢出处理 | `overflow` / `maxLines` |

---

如果你有具体的使用场景（如：多行文本、动态文本、国际化等），我可以提供更详细的代码示例。欢迎继续提问！