# Text

在 Flutter 中，`Text` 组件是负责显示文本的核心部件，几乎出现在任何需要展示文字的地方。它非常灵活，既可以显示简单的单一样式文本，也能通过 `Text.rich` 构建复杂的富文本效果。

### 1. 核心用法与基本参数

使用 `Text` 最基本的方式就是创建一个 `Text` 实例，并传入要显示的字符串。但通过设置不同的参数，可以控制其布局和截断方式。

-   **`textAlign` (文本对齐)** ：控制文本在 `Text` 组件内的水平对齐方式，例如 `TextAlign.center`（居中）、`TextAlign.left`（左对齐）。需要注意的是，只有当 `Text` 组件的宽度大于文本实际内容宽度时，对齐设置才会生效。

-   **`maxLines` (最大行数)** ：限制文本最多显示的行数。默认情况下，文本会自动换行。设置此参数后，超出部分的行将不会被显示[-1](https://www.w3cschool.cn/flutter_in_action/flutter_in_action-qdz23ezf.html)。

-   **`overflow` (溢出处理)** ：当文本内容超出 `maxLines` 限制或父容器约束时，如何处理溢出。常用的有：

    -   `TextOverflow.ellipsis`：用省略号“...”表示被截断的文本。
    -   `TextOverflow.clip`：直接裁剪掉溢出的文本（默认行为）。
    -   `TextOverflow.fade`：将溢出的文本边缘渐隐处理。

-   **`softWrap` (是否软换行)** ：决定文本是否在换行符处自动换行。如果设为 `false`，文本将只占一行，可能导致水平方向溢出。

-   **`textScaleFactor` (文本缩放因子)** ：一个快速放大或缩小文本的因子。例如，设为 `1.5` 会使所有文本放大50%。不过，官方现在更推荐使用 `textScaler` 来获得更精细的控制。

**示例：**


```dart
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Text组件"),
        ),
        body: Container(
          // 文本居中方式
          alignment: Alignment.center,
          width: double.infinity,
          height: double.infinity,
          color: Colors.amber,
          child: Text.rich(TextSpan(
            text: "Hello",
            children: [
              TextSpan(
                text: "Flutter",style: TextStyle(color: Colors.green)
              ),
              TextSpan(text:"!")
            ],
            style: TextStyle(
              // 字体颜色
              color: Colors.red,
              // 字体大小
              fontSize: 40,
              // 字重
              fontWeight: FontWeight.bold

            )
          )),
          // 当字体显示数量超过对应行数时，其余文本将进行隐藏，并截断文本用...显示。
          // child: Text("今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，",
          //   style: TextStyle(
          //     color: Colors.blue,
          //     fontSize: 30
          //   ),
          //   maxLines: 2,
          //   // 溢出隐藏 
          //   overflow: TextOverflow.ellipsis,
          // ),
          // 基础Text组件
          // child:Text("Hello Flutter!",style: TextStyle(
          //   fontSize: 30,
          //   color: Colors.blue,
          //   fontStyle: FontStyle.italic,
          //   fontWeight: FontWeight.w600,
          //   decoration: TextDecoration.underline,
          //   decorationColor: Colors.red
          // ),),
        )
      ),
    );
  }
}
```

### 2. 样式定制 (TextStyle)

`Text` 组件的样式主要通过 `style` 属性来设置，其值是一个 `TextStyle` 对象。`TextStyle` 提供了极其丰富的参数来定义文本的外观[-5](https://api.flutter.dev/flutter/painting/TextStyle-class.html?source=post_page-----a72358d0ae53--------------------------------)[-10](https://cloud.tencent.cn/developer/information/%E5%9C%A8%E9%A2%A4%E5%8A%A8%E4%B8%AD%E8%AE%BE%E7%BD%AETextStyle-article)。

-   **基础样式**：如 `color`（颜色）、`fontSize`（字号）、`fontWeight`（字重，如粗体）、`fontStyle`（样式，如斜体）。

-   **间距与行高**：

    -   `letterSpacing` 和 `wordSpacing` 控制字符和单词的间距。
    -   `height` 用于设置行高，它的值是 `fontSize` 的倍数。例如 `height: 1.5` 且 `fontSize: 20.0`，则最终行高为 30.0 逻辑像素。

-   **装饰效果**：

    -   `decoration`：添加下划线 (`TextDecoration.underline`)、删除线 (`TextDecoration.lineThrough`) 等。
    -   `decorationColor` 和 `decorationStyle` 分别设置装饰的颜色和样式（如虚线、波浪线）。

-   **高级效果**：通过 `background` 和 `foreground` 属性，可以使用 `Paint` 对象实现更复杂的效果，比如给文本添加背景色，或使用渐变色、描边等。

**示例：**


```
Text(
  'Hello World',
  style: TextStyle(
    // 字体大小
    fontSize: 24.0,
    // 字体颜色
    color: Colors.blue,
    
    fontWeight: FontWeight.bold,
    // 装饰央视
    decoration: TextDecoration.underline,
    // 字体颜色
    decorationColor: Colors.red,
    // 字符
    decorationStyle: TextDecorationStyle.wavy,
    // 字符间距
    letterSpacing: 2.0,
  ),
)
```

### 3. 富文本 (TextSpan 与 Text.rich)

如果一段文本中需要包含多种样式（例如一句话里部分文字是蓝色且可点击），就不能使用普通的 `Text` 了。这时需要用到 `TextSpan` 和 `Text.rich` 构造函数。

`TextSpan` 代表一个具有独立样式的文本“片段”。多个 `TextSpan` 可以组合在一起，形成复杂的富文本结构。

-   **`text`**：显示的文本。
-   **`style`**：显示文本的样式。
-   **`children`**：一个 `TextSpan` 列表，用于嵌套更多的片段。
-   **`recognizer`**：为这个片段添加手势识别，比如点击事件。

**示例：**  
以下代码创建了一个带有可点击链接的富文本。


```js
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

Text.rich(
  TextSpan(
    text: '访问 ',
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter 官网',
        style: const TextStyle(color: Colors.blue),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // 处理点击事件，例如打开网页
            print('链接被点击了');
          },
      ),
      TextSpan(text: ' 了解更多。'),
    ],
  ),
)
```

### 4. 全局样式管理 (DefaultTextStyle)

在一个页面的多个地方使用相同的文本样式时，如果每个 `Text` 都单独设置 `style`，代码会显得冗余。Flutter 提供了 `DefaultTextStyle` 组件来管理全局或局部的默认文本样式。

`DefaultTextStyle` 可以包裹一个组件子树，并为其设置默认的 `style` 和 `textAlign`。该子树中所有未显式指定样式的 `Text` 组件，都会自动继承这个默认样式。

**示例：**

dart

复制下载

```dart
// 默认文本样式
DefaultTextStyle(
  style: const TextStyle(
    color: Colors.red,
    fontSize: 20.0,
  ),
  // 文本居中方式
  textAlign: TextAlign.center,
  child: Column(
    children: const [
      Text('这段文字是红色的20号字并居中'), // 继承样式
      Text('我也是同样的样式'),
      Text(
        '但我有不同样式',
        style: TextStyle( // 局部覆盖
          inherit: false, // 可选择不继承默认样式
          color: Colors.grey,
        ),
      ),
    ],
  ),
)
```

通过设置 `inherit: false`，子 `Text` 可以选择完全不继承父级的默认样式。

### 5. 使用自定义字体

要在应用中使用自定义字体（如非系统默认的字体文件），需要完成两个步骤：

1.  **在 `pubspec.yaml` 中声明**：将字体文件（通常放在 `fonts` 或 `assets` 目录下）的路径和样式在配置文件中声明。


    ```dart
    flutter:
      fonts:
        - family: MyCustomFont  # 字体的家族名称
          fonts:
            - asset: fonts/MyCustomFont-Regular.ttf
            - asset: fonts/MyCustomFont-Bold.ttf
              weight: 700  # 指定该文件对应的字重
    ```

1.  **在 `TextStyle` 中使用**：通过 `fontFamily` 属性引用你在 `pubspec.yaml` 中定义的字体家族名称。


    ```dart
    Text(
      '这是自定义字体',
      style: TextStyle(
        fontFamily: 'MyCustomFont',
        fontSize: 30.0,
      ),
    )
    ```

在 Flutter 中，Text 组件是负责显示文本的核心部件，几乎出现在任何需要展示文字的地方。它非常灵活，既可以显示简单的单一样式文本，也能通过 Text.rich 构建复杂的富文本效果。

Flutter那些事-展示型组件篇

前端

客户端

Flutter Text组件详解：掌握文本显示与样式定制技巧。学习Text基础参数（textAlign、maxLines、overflow）和TextStyle样式设置（颜色、字号、间距）。了解TextSpan富文本和DefaultTextStyle全局样式管理，实现复杂文本效果。包含自定义字体使用指南，提升Flutter应用文本展示能力。

Flutter

容器

2026新春采购季

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Flutter Text组件详解：掌握文本显示与样式定制技巧。学习Text基础参数（textAlign、maxLines、overflow）和TextStyle样式设置（颜色、字号、间距）。了解TextSpan富文本和DefaultTextStyle全局样式管理，实现复杂文本效果。包含自定义字体使用指南，提升Flutt...

Flutter那些事-展示型组件篇-腾讯云开发者社区-腾讯云

Flutter那些事-展示型组件篇

Flutter那些事-展示型组件篇

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐