Flutter Text 文本组件完全指南

—Qeyser2026-01-21 12:45

什么是 Text？

Text 是 Flutter 中用于显示文本的基础组件，就像 HTML 中的文本标签。

用途：

  • 显示标题
  • 显示正文内容
  • 显示按钮文字
  • 显示任何文本信息

基础用法

最简单的文本

dart 复制代码 
Text('Hello Flutter')

带样式的文本

dart 复制代码 
Text(
  'Hello Flutter',
  style: TextStyle(
    fontSize: 20,
    color: Colors.blue,
  ),
)

常用属性

1. 文本内容

dart 复制代码 
Text('这是文本内容')

// 使用变量
String message = '动态文本';
Text(message)

// 字符串插值
int count = 5;
Text('你有 $count 条消息')

2. 文本样式 style

dart 复制代码 
Text(
  '样式文本',
  style: TextStyle(
    fontSize: 24,              // 字体大小
    color: Colors.blue,        // 颜色
    fontWeight: FontWeight.bold,  // 粗体
    fontStyle: FontStyle.italic,  // 斜体
  ),
)

3. 文本对齐 textAlign

dart 复制代码 
Text(
  '居中对齐',
  textAlign: TextAlign.center,
)

// 对齐方式
textAlign: TextAlign.left,      // 左对齐
textAlign: TextAlign.right,     // 右对齐
textAlign: TextAlign.center,    // 居中
textAlign: TextAlign.justify,   // 两端对齐
textAlign: TextAlign.start,     // 开始位置
textAlign: TextAlign.end,       // 结束位置

4. 最大行数 maxLines

dart 复制代码 
Text(
  '这是一段很长的文本，可能会超出一行显示',
  maxLines: 2,  // 最多显示 2 行
)

5. 文本溢出 overflow

dart 复制代码 
Text(
  '这是一段很长的文本，超出部分会被处理',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,  // 超出显示省略号
)

// 溢出处理方式
overflow: TextOverflow.clip,      // 直接裁剪
overflow: TextOverflow.fade,      // 渐隐
overflow: TextOverflow.ellipsis,  // 省略号 ...
overflow: TextOverflow.visible,   // 可见（超出容器）

6. 软换行 softWrap

dart 复制代码 
Text(
  '这是一段文本',
  softWrap: true,   // 自动换行（默认）
  softWrap: false,  // 不换行
)

TextStyle 详解

1. 字体大小和颜色

dart 复制代码 
TextStyle(
  fontSize: 20,           // 字体大小
  color: Colors.blue,     // 字体颜色
)

2. 字体粗细

dart 复制代码 
TextStyle(
  fontWeight: FontWeight.normal,   // 正常
  fontWeight: FontWeight.bold,     // 粗体
  fontWeight: FontWeight.w100,     // 最细
  fontWeight: FontWeight.w900,     // 最粗
)

3. 字体样式

dart 复制代码 
TextStyle(
  fontStyle: FontStyle.normal,   // 正常
  fontStyle: FontStyle.italic,   // 斜体
)

4. 字间距和行高

dart 复制代码 
TextStyle(
  letterSpacing: 2.0,    // 字间距
  wordSpacing: 5.0,      // 词间距
  height: 1.5,           // 行高（倍数）
)

5. 文本装饰

dart 复制代码 
// 下划线
TextStyle(
  decoration: TextDecoration.underline,
  decorationColor: Colors.red,
  decorationStyle: TextDecorationStyle.solid,
)

// 删除线
TextStyle(
  decoration: TextDecoration.lineThrough,
)

// 上划线
TextStyle(
  decoration: TextDecoration.overline,
)

// 装饰样式
decorationStyle: TextDecorationStyle.solid,    // 实线
decorationStyle: TextDecorationStyle.double,   // 双线
decorationStyle: TextDecorationStyle.dotted,   // 点线
decorationStyle: TextDecorationStyle.dashed,   // 虚线
decorationStyle: TextDecorationStyle.wavy,     // 波浪线

6. 阴影

dart 复制代码 
TextStyle(
  shadows: [
    Shadow(
      color: Colors.black.withOpacity(0.5),
      offset: Offset(2, 2),
      blurRadius: 3,
    ),
  ],
)

7. 背景色

dart 复制代码 
TextStyle(
  backgroundColor: Colors.yellow,
)

8. 自定义字体

dart 复制代码 
TextStyle(
  fontFamily: 'Roboto',  // 需要在 pubspec.yaml 中配置
)

实战案例

案例1：标题文本

dart 复制代码 
Text(
  '文章标题',
  style: TextStyle(
    fontSize: 28,
    fontWeight: FontWeight.bold,
    color: Colors.black87,
  ),
)

案例2：副标题

dart 复制代码 
Text(
  '副标题或描述文字',
  style: TextStyle(
    fontSize: 16,
    color: Colors.grey[600],
    height: 1.5,
  ),
)

案例3：价格标签

dart 复制代码 
Row(
  children: [
    Text(
      '¥',
      style: TextStyle(
        fontSize: 16,
        color: Colors.red,
      ),
    ),
    Text(
      '99',
      style: TextStyle(
        fontSize: 32,
        fontWeight: FontWeight.bold,
        color: Colors.red,
      ),
    ),
    Text(
      '.99',
      style: TextStyle(
        fontSize: 16,
        color: Colors.red,
      ),
    ),
  ],
)

案例4：原价删除线

dart 复制代码 
Text(
  '原价 ¥199',
  style: TextStyle(
    fontSize: 14,
    color: Colors.grey,
    decoration: TextDecoration.lineThrough,
  ),
)

案例5：强调文本

dart 复制代码 
Text(
  '重要提示',
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
    color: Colors.red,
    backgroundColor: Colors.yellow,
  ),
)

案例6：链接样式

dart 复制代码 
GestureDetector(
  onTap: () {
    print('点击了链接');
  },
  child: Text(
    '点击查看详情',
    style: TextStyle(
      fontSize: 16,
      color: Colors.blue,
      decoration: TextDecoration.underline,
    ),
  ),
)

案例7：多行文本截断

dart 复制代码 
Text(
  '这是一段很长的文本内容，可能会超出显示区域，我们需要对它进行截断处理，超出的部分会显示省略号',
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(
    fontSize: 14,
    color: Colors.black87,
    height: 1.5,
  ),
)

案例8：带阴影的标题

dart 复制代码 
Text(
  '立体标题',
  style: TextStyle(
    fontSize: 36,
    fontWeight: FontWeight.bold,
    color: Colors.white,
    shadows: [
      Shadow(
        color: Colors.black.withOpacity(0.5),
        offset: Offset(3, 3),
        blurRadius: 5,
      ),
    ],
  ),
)

案例9：渐变文本（使用 Shader）

dart 复制代码 
ShaderMask(
  shaderCallback: (bounds) => LinearGradient(
    colors: [Colors.blue, Colors.purple],
  ).createShader(bounds),
  child: Text(
    '渐变文本',
    style: TextStyle(
      fontSize: 40,
      fontWeight: FontWeight.bold,
      color: Colors.white,
    ),
  ),
)

案例10：徽章文本

dart 复制代码 
Container(
  padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(12),
  ),
  child: Text(
    'NEW',
    style: TextStyle(
      fontSize: 12,
      color: Colors.white,
      fontWeight: FontWeight.bold,
    ),
  ),
)

RichText 富文本

当需要在一段文本中使用不同样式时，使用 RichText。

基础用法

dart 复制代码 
RichText(
  text: TextSpan(
    text: '普通文本 ',
    style: TextStyle(color: Colors.black, fontSize: 16),
    children: [
      TextSpan(
        text: '粗体文本 ',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
      TextSpan(
        text: '红色文本',
        style: TextStyle(color: Colors.red),
      ),
    ],
  ),
)

案例：文章段落

dart 复制代码 
RichText(
  text: TextSpan(
    style: TextStyle(fontSize: 16, color: Colors.black87, height: 1.5),
    children: [
      TextSpan(text: 'Flutter 是 '),
      TextSpan(
        text: 'Google',
        style: TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(text: ' 推出的开源 UI 框架，可以快速构建 '),
      TextSpan(
        text: '跨平台',
        style: TextStyle(
          color: Colors.orange,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(text: ' 应用。'),
    ],
  ),
)

案例：用户协议

dart 复制代码 
RichText(
  text: TextSpan(
    style: TextStyle(fontSize: 14, color: Colors.black),
    children: [
      TextSpan(text: '我已阅读并同意'),
      WidgetSpan(
        child: GestureDetector(
          onTap: () {
            print('点击了用户协议');
          },
          child: Text(
            '《用户协议》',
            style: TextStyle(
              color: Colors.blue,
              decoration: TextDecoration.underline,
            ),
          ),
        ),
      ),
      TextSpan(text: '和'),
      WidgetSpan(
        child: GestureDetector(
          onTap: () {
            print('点击了隐私政策');
          },
          child: Text(
            '《隐私政策》',
            style: TextStyle(
              color: Colors.blue,
              decoration: TextDecoration.underline,
            ),
          ),
        ),
      ),
    ],
  ),
)

SelectableText 可选择文本

允许用户选择和复制文本。

dart 复制代码 
SelectableText(
  '这段文本可以被选择和复制',
  style: TextStyle(fontSize: 16),
)

// 带工具栏
SelectableText(
  '长按可以选择复制',
  style: TextStyle(fontSize: 16),
  toolbarOptions: ToolbarOptions(
    copy: true,
    selectAll: true,
    cut: false,
    paste: false,
  ),
)

完整示例

dart 复制代码 
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TextDemo(),
    );
  }
}

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Text 组件示例')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 基础文本
            Text('基础文本'),
            SizedBox(height: 20),

            // 大标题
            Text(
              '这是大标题',
              style: TextStyle(
                fontSize: 28,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 20),

            // 彩色文本
            Text(
              '彩色文本',
              style: TextStyle(
                fontSize: 24,
                color: Colors.blue,
              ),
            ),
            SizedBox(height: 20),

            // 斜体文本
            Text(
              '斜体文本',
              style: TextStyle(
                fontSize: 20,
                fontStyle: FontStyle.italic,
              ),
            ),
            SizedBox(height: 20),

            // 下划线文本
            Text(
              '下划线文本',
              style: TextStyle(
                fontSize: 20,
                decoration: TextDecoration.underline,
                decorationColor: Colors.red,
              ),
            ),
            SizedBox(height: 20),

            // 删除线文本
            Text(
              '删除线文本',
              style: TextStyle(
                fontSize: 20,
                decoration: TextDecoration.lineThrough,
              ),
            ),
            SizedBox(height: 20),

            // 带背景色的文本
            Text(
              '带背景色的文本',
              style: TextStyle(
                fontSize: 20,
                backgroundColor: Colors.yellow,
              ),
            ),
            SizedBox(height: 20),

            // 多行文本截断
            Container(
              width: double.infinity,
              padding: EdgeInsets.all(10),
              color: Colors.grey[200],
              child: Text(
                '这是一段很长的文本，用来演示文本截断效果。当文本超过指定行数时，会显示省略号。这是一段很长的文本，用来演示文本截断效果。',
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(fontSize: 16),
              ),
            ),
            SizedBox(height: 20),

            // 富文本
            RichText(
              text: TextSpan(
                style: TextStyle(fontSize: 16, color: Colors.black),
                children: [
                  TextSpan(text: '这是 '),
                  TextSpan(
                    text: '富文本',
                    style: TextStyle(
                      color: Colors.red,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  TextSpan(text: ' 示例，可以有 '),
                  TextSpan(
                    text: '不同样式',
                    style: TextStyle(
                      color: Colors.blue,
                      fontSize: 20,
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 20),

            // 可选择文本
            SelectableText(
              '这段文本可以被选择和复制',
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 20),

            // 价格展示
            Row(
              children: [
                Text(
                  '¥',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.red,
                  ),
                ),
                Text(
                  '99',
                  style: TextStyle(
                    fontSize: 36,
                    fontWeight: FontWeight.bold,
                    color: Colors.red,
                  ),
                ),
                SizedBox(width: 10),
                Text(
                  '¥199',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.grey,
                    decoration: TextDecoration.lineThrough,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

常见问题

1. 文本不换行？

dart 复制代码 
// ❌ 问题：文本超出屏幕
Text('很长的文本...')

// ✅ 解决：限制宽度
Container(
  width: 200,
  child: Text('很长的文本...'),
)

2. 如何让文本居中？

dart 复制代码 
// 方法1：使用 textAlign
Text(
  '居中文本',
  textAlign: TextAlign.center,
)

// 方法2：使用 Center
Center(
  child: Text('居中文本'),
)

3. 如何设置行间距？

dart 复制代码 
Text(
  '多行文本\n第二行\n第三行',
  style: TextStyle(
    height: 2.0,  // 行高是字体大小的 2 倍
  ),
)

4. 文本颜色不生效？

确保没有被父组件的主题覆盖：

dart 复制代码 
// ✅ 明确指定颜色
Text(
  '文本',
  style: TextStyle(color: Colors.blue),
)

属性速查表

属性 类型 说明
data String 文本内容
style TextStyle 文本样式
textAlign TextAlign 对齐方式
maxLines int 最大行数
overflow TextOverflow 溢出处理
softWrap bool 是否自动换行

TextStyle 属性

属性 类型 说明
fontSize double 字体大小
color Color 字体颜色
fontWeight FontWeight 字体粗细
fontStyle FontStyle 字体样式（斜体等）
letterSpacing double 字间距
wordSpacing double 词间距
height double 行高
decoration TextDecoration 文本装饰（下划线等）
backgroundColor Color 背景颜色
shadows List 阴影

总结

Text 组件的核心用途：

  1. 显示各种文本内容
  2. 设置丰富的文本样式
  3. 处理文本溢出和换行
  4. 创建富文本效果

记住：

  • Text 是最基础的组件
  • 使用 TextStyle 设置样式
  • maxLines + overflow 处理长文本
  • RichText 实现富文本
  • SelectableText 让文本可选择

掌握 Text 组件是 Flutter 开发的第一步！

相关推荐
咕噜企业分发小米2 小时前
豆包大模型在药物研发中的知识检索效率如何？
java·开发语言·数据库
程序员小李白2 小时前
js数据类型详细解析
前端·javascript·vue.js
橘子师兄2 小时前
C++AI大模型接入SDK—快速上手
开发语言·c++·人工智能
麒qiqi2 小时前
进阶 IMX6ULL 裸机开发：从 C 语言点灯到 BSP 工程化（附 SDK / 链接脚本实战）
c语言·开发语言
Kratzdisteln2 小时前
【1902】0120-3 Dify变量引用只能引用一层
android·java·javascript
满栀5852 小时前
jQuery 递归渲染多级树形菜单
前端·javascript·jquery
秋刀鱼程序编程2 小时前
Java基础入门（七）---异常处理
java·开发语言·python
猛扇赵四那边好嘴.2 小时前
Flutter 框架跨平台鸿蒙开发 - 书籍借阅管理器应用开发教程
flutter·华为·harmonyos
遇见你的雩风2 小时前
Java---多线程（一）
java·开发语言
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)032025 Telegram 最新免费社工库机器人（LetsTG可[特殊字符]）搭建指南（含 Python 脚本）04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）08Claude Code Skills 实用使用手册09BongoCat - 跨平台键盘猫动画工具10Linux下V2Ray安装配置指南