鸿蒙Flutter文本组件与样式(Text, TextStyle)详解

小雨下雨的雨

98人浏览 · 2026-07-19 13:16:44

小雨下雨的雨 · 2026-07-19 13:16:44 发布

在这里插入图片描述

引言

在 Flutter 应用开发中，文本展示是最基础也是最常用的功能之一。无论是应用的标题、描述信息、用户反馈还是数据展示，都离不开文本组件。Flutter 提供了强大而灵活的 Text 组件和 TextStyle 样式系统，让开发者能够轻松实现各种复杂的文本展示需求。

本章将深入探讨 Flutter 的文本组件体系，包括 Text、TextStyle、RichText、DefaultTextStyle 等核心组件，帮助读者掌握文本样式的全部技能。

1. Text组件基础

1.1 Text组件概述

Text 是 Flutter 中最基础的文本展示组件，用于显示一段单一样式的文本。它是构建用户界面的基石，几乎每个应用都会用到。

Text(
  'Hello World',
)

这个最简单的 Text 组件会使用系统默认样式显示文本内容。

1.2 Text组件构造函数

Text 组件的完整构造函数包含多个参数，用于控制文本的各种行为：

Text(
  required String data,           // 文本内容（必填）
  TextStyle? style,              // 文本样式
  StrutStyle? strutStyle,         // 行高样式
  TextAlign? textAlign,          // 对齐方式
  TextDirection? textDirection,  // 文本方向
  Locale? locale,                // 区域设置
  bool? softWrap,                // 是否自动换行
  TextOverflow? overflow,        // 溢出处理
  double? textScaleFactor,       // 字体缩放因子
  int? maxLines,                 // 最大行数
  String? semanticsLabel,        // 语义标签
  TextWidthBasis? textWidthBasis, // 宽度基准
)

1.3 核心参数详解

data 参数

data 是 Text 组件唯一的必填参数，表示要显示的文本内容。它接收一个 String 类型的值。

Text('这是要显示的文本内容')

textAlign 参数

textAlign 参数控制文本在水平方向上的对齐方式。它支持以下几种值：

值	说明
`TextAlign.left`	左对齐
`TextAlign.right`	右对齐
`TextAlign.center`	居中对齐
`TextAlign.justify`	两端对齐
`TextAlign.start`	起始对齐（根据文本方向决定）
`TextAlign.end`	结束对齐（根据文本方向决定）

Text(
  '这是一段测试文本',
  textAlign: TextAlign.center,
)

softWrap 参数

softWrap 参数控制文本是否自动换行。默认值为 true，表示文本会根据容器宽度自动换行。如果设置为 false，文本会在同一行显示，可能会超出容器边界。

Text(
  '这是一段很长的文本，用于测试自动换行功能',
  softWrap: false,
)

maxLines 参数

maxLines 参数限制文本显示的最大行数。当文本内容超过指定行数时，会根据 overflow 参数的设置进行处理。

Text(
  '这是一段很长的文本，用于测试最大行数限制',
  maxLines: 2,
)

overflow 参数

overflow 参数定义了当文本内容超出容器或 maxLines 限制时的处理方式：

值	说明
`TextOverflow.clip`	裁剪溢出部分，直接截断
`TextOverflow.fade`	渐隐溢出部分，产生渐变效果
`TextOverflow.ellipsis`	在末尾显示省略号 `...`
`TextOverflow.visible`	显示全部内容，即使溢出容器

Text(
  '这是一段非常长的文本，用于演示溢出处理效果',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)

textScaleFactor 参数

textScaleFactor 参数用于控制文本的缩放比例。它是一个浮点数，默认为 1.0。设置为 2.0 表示文本放大一倍，设置为 0.5 表示文本缩小一半。

Text(
  '缩放文本',
  textScaleFactor: 1.5,
)

2. TextStyle样式系统

2.1 TextStyle概述

TextStyle 是 Flutter 中用于定义文本样式的核心类。通过 TextStyle，开发者可以精确控制文本的颜色、字体大小、字重、行高、装饰线等属性。

2.2 TextStyle构造函数

TextStyle({
  Color? color,                  // 文字颜色
  FontWeight? fontWeight,        // 字重
  FontStyle? fontStyle,          // 字体样式（斜体等）
  double? fontSize,              // 字体大小
  double? letterSpacing,         // 字母间距
  double? wordSpacing,           // 单词间距
  TextBaseline? textBaseline,    // 基线
  double? height,                // 行高
  TextDecoration? decoration,    // 装饰线（下划线等）
  Color? decorationColor,        // 装饰线颜色
  TextDecorationStyle? decorationStyle, // 装饰线样式
  String? fontFamily,            // 字体家族
  List<String>? fontFamilyFallback, // 备用字体
  Package? package,              // 字体包
})

2.3 常用属性详解

color 属性

color 属性用于设置文本的颜色。Flutter 提供了丰富的颜色系统，可以使用预定义颜色、十六进制颜色或自定义颜色。

Text(
  '蓝色文本',
  style: TextStyle(color: Colors.blue),
)

Text(
  '自定义颜色文本',
  style: TextStyle(color: Color(0xFF4CAF50)),
)

fontSize 属性

fontSize 属性用于设置字体大小，单位是逻辑像素。

Text(
  '24号字',
  style: TextStyle(fontSize: 24),
)

fontWeight 属性

fontWeight 属性用于设置字重，即字体的粗细程度。Flutter 提供了从 w100 到 w900 的 9 种字重：

值	说明
`FontWeight.w100`	最细
`FontWeight.w200`	较细
`FontWeight.w300`	细
`FontWeight.w400`	正常（默认）
`FontWeight.w500`	中等
`FontWeight.w600`	半粗
`FontWeight.w700`	粗体
`FontWeight.w800`	较粗
`FontWeight.w900`	最粗

Text(
  '粗体文本',
  style: TextStyle(fontWeight: FontWeight.bold), // 等同于 FontWeight.w700
)

Text(
  '细体文本',
  style: TextStyle(fontWeight: FontWeight.w300),
)

fontStyle 属性

fontStyle 属性用于设置字体样式，主要用于控制斜体：

Text(
  '斜体文本',
  style: TextStyle(fontStyle: FontStyle.italic),
)

Text(
  '正常文本',
  style: TextStyle(fontStyle: FontStyle.normal),
)

height 属性

height 属性用于设置行高。它是一个倍数，相对于字体大小。例如，height: 1.5 表示行高是字体大小的 1.5 倍。

Text(
  '这是一段多行文本，用于演示行高效果。\n这是第二行。\n这是第三行。',
  style: TextStyle(fontSize: 16, height: 1.5),
)

注意：height 属性设置的是行高与字体大小的比值，而不是绝对像素值。实际行高 = fontSize × height。

letterSpacing 属性

letterSpacing 属性用于设置字母之间的间距，单位是逻辑像素。

Text(
  '字间距演示',
  style: TextStyle(letterSpacing: 2),
)

wordSpacing 属性

wordSpacing 属性用于设置单词之间的间距，单位是逻辑像素。

Text(
  'Word spacing example',
  style: TextStyle(wordSpacing: 4),
)

decoration 属性

decoration 属性用于设置文本的装饰线，如下划线、删除线等：

值	说明
`TextDecoration.none`	无装饰线（默认）
`TextDecoration.underline`	下划线
`TextDecoration.lineThrough`	删除线
`TextDecoration.overline`	上划线

Text(
  '带下划线的文本',
  style: TextStyle(decoration: TextDecoration.underline),
)

Text(
  '带删除线的文本',
  style: TextStyle(decoration: TextDecoration.lineThrough),
)

decorationColor 属性

decorationColor 属性用于设置装饰线的颜色。

Text(
  '红色下划线',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
  ),
)

decorationStyle 属性

decorationStyle 属性用于设置装饰线的样式：

值	说明
`TextDecorationStyle.solid`	实线（默认）
`TextDecorationStyle.double`	双线
`TextDecorationStyle.dotted`	点线
`TextDecorationStyle.dashed`	虚线
`TextDecorationStyle.wavy`	波浪线

Text(
  '波浪线下划线',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.wavy,
  ),
)

fontFamily 属性

fontFamily 属性用于设置字体家族。Flutter 支持自定义字体，需要在项目中配置字体文件。

Text(
  '使用自定义字体',
  style: TextStyle(fontFamily: 'MyCustomFont'),
)

3. 富文本组件 RichText

3.1 RichText概述

RichText 组件用于显示多种样式的文本。当需要在同一段文本中使用不同的样式时，可以使用 RichText 配合 TextSpan 来实现。

3.2 RichText构造函数

RichText({
  required TextSpan text,        // 文本内容
  TextAlign textAlign = TextAlign.start, // 对齐方式
  TextDirection? textDirection,  // 文本方向
  bool softWrap = true,          // 是否自动换行
  TextOverflow overflow = TextOverflow.clip, // 溢出处理
  double textScaleFactor = 1.0,  // 缩放因子
  int? maxLines,                 // 最大行数
})

3.3 TextSpan详解

TextSpan 是 RichText 的核心，用于定义带有样式的文本片段。它可以嵌套，形成复杂的文本结构。

TextSpan({
  String? text,                  // 文本内容
  TextStyle? style,              // 文本样式
  List<TextSpan>? children,      // 子文本片段
  GestureRecognizer? recognizer, // 手势识别器
})

3.4 RichText使用示例

基本示例

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(color: Colors.black),
    children: [
      TextSpan(
        text: 'World',
        style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
      ),
      TextSpan(text: '!'),
    ],
  ),
)

价格显示示例

RichText(
  text: TextSpan(
    text: '¥',
    style: TextStyle(fontSize: 16, color: Colors.red),
    children: [
      TextSpan(
        text: '99',
        style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, color: Colors.red),
      ),
      TextSpan(text: '.00'),
    ],
  ),
)

带链接的文本

RichText(
  text: TextSpan(
    text: '请查看 ',
    style: TextStyle(color: Colors.black),
    children: [
      TextSpan(
        text: '用户协议',
        style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // 处理点击事件
          },
      ),
    ],
  ),
)

4. 默认文本样式 DefaultTextStyle

4.1 DefaultTextStyle概述

DefaultTextStyle 组件用于为其子树中的所有 Text 组件设置默认样式。当子组件没有显式设置样式时，会自动继承 DefaultTextStyle 中定义的样式。

4.2 使用场景

当页面中有多个文本组件需要使用相同的样式时，可以使用 DefaultTextStyle 统一设置，避免重复代码。

DefaultTextStyle(
  style: TextStyle(color: Colors.grey, fontSize: 14),
  child: Column(
    children: [
      Text('文本1'),           // 使用默认样式
      Text('文本2'),           // 使用默认样式
      Text('文本3',           // 覆盖默认样式
        style: TextStyle(color: Colors.blue),
      ),
    ],
  ),
)

4.3 DefaultTextStyle.merge

DefaultTextStyle.merge 方法可以基于父级的默认样式进行扩展，而不是完全替换。

DefaultTextStyle.merge(
  style: TextStyle(fontSize: 16), // 在父级样式基础上增加字体大小
  child: Text('继承并扩展样式'),
)

5. 实际应用场景

5.1 场景一：页面标题

Text(
  '商品详情',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  ),
)

5.2 场景二：描述文本

Text(
  '这是一款高性能的智能手机，配备顶级处理器和高清显示屏，为您带来极致的使用体验。',
  style: TextStyle(
    fontSize: 14,
    color: Colors.grey[600],
    height: 1.5,
  ),
  textAlign: TextAlign.justify,
)

5.3 场景三：价格显示

RichText(
  text: TextSpan(
    text: '¥',
    style: TextStyle(fontSize: 16, color: Colors.red),
    children: [
      TextSpan(
        text: '99',
        style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, color: Colors.red),
      ),
      TextSpan(text: '.00'),
    ],
  ),
)

5.4 场景四：带删除线的原价

RichText(
  text: TextSpan(
    text: '原价 ¥199',
    style: TextStyle(
      color: Colors.grey,
      decoration: TextDecoration.lineThrough,
      fontSize: 14,
    ),
  ),
)

5.5 场景五：多行文本溢出处理

Text(
  '这是一段非常长的文本内容，用于演示多行文本的溢出处理效果。当文本内容超过指定的行数时，会自动显示省略号。',
  style: TextStyle(fontSize: 14),
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

6. 自定义字体配置

6.1 添加字体文件

要在 Flutter 应用中使用自定义字体，需要按照以下步骤操作：

在项目根目录创建 fonts 文件夹
将字体文件（如 .ttf 或 .otf）放入 fonts 文件夹
在 pubspec.yaml 中配置字体

flutter:
  fonts:
    - family: MyCustomFont
      fonts:
        - asset: fonts/MyCustomFont-Regular.ttf
        - asset: fonts/MyCustomFont-Bold.ttf
          weight: 700
        - asset: fonts/MyCustomFont-Italic.ttf
          style: italic

6.2 使用自定义字体

配置完成后，可以通过 fontFamily 属性使用自定义字体：

Text(
  '使用自定义字体',
  style: TextStyle(fontFamily: 'MyCustomFont'),
)

7. 性能优化建议

7.1 避免频繁创建 TextStyle

在 build 方法中频繁创建 TextStyle 对象会导致不必要的性能开销。建议将常用的样式定义为静态常量：

class AppTextStyles {
  static const TextStyle title = TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  );
  
  static const TextStyle body = TextStyle(
    fontSize: 14,
    color: Colors.grey,
  );
}

// 使用
Text('标题', style: AppTextStyles.title)

7.2 合理使用 DefaultTextStyle

使用 DefaultTextStyle 可以减少重复的样式定义，提高代码复用性。

7.3 避免不必要的 RichText

RichText 比普通的 Text 组件更复杂，性能开销也更大。如果不需要多种样式，应优先使用 Text 组件。

8. 常见问题与解决方案

8.1 问题一：文本不换行

现象：文本内容超出容器宽度但没有自动换行。

解决方案：检查 softWrap 参数是否设置为 false，如果是，将其改为 true 或省略（默认为 true）。

Text(
  '很长的文本内容',
  softWrap: true, // 确保自动换行
)

8.2 问题二：省略号不显示

现象：设置了 overflow: TextOverflow.ellipsis 但省略号不显示。

解决方案：确保同时设置了 maxLines 参数，省略号只在文本超出指定行数时才会显示。

Text(
  '很长的文本内容',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)

8.3 问题三：行高不生效

现象：设置了 height 属性但行高没有变化。

解决方案：height 属性需要配合 fontSize 使用，它是行高与字体大小的比值。确保 fontSize 已设置。

Text(
  '多行文本',
  style: TextStyle(fontSize: 16, height: 1.5), // 实际行高 = 16 × 1.5 = 24
)

8.4 问题四：自定义字体不显示

现象：配置了自定义字体但文本仍然显示默认字体。

解决方案：

检查 pubspec.yaml 中的字体配置是否正确
确保字体文件路径正确
运行 flutter pub get 更新依赖
重启应用

9. 总结

文本组件是 Flutter UI 开发的基础，掌握 Text、TextStyle、RichText 和 DefaultTextStyle 等组件的使用是每个 Flutter 开发者的必备技能。

通过本章的学习，读者应该能够：

熟练使用 Text 组件的各种参数控制文本显示
掌握 TextStyle 的所有样式属性
使用 RichText 实现复杂的富文本效果
通过 DefaultTextStyle 统一管理文本样式
配置和使用自定义字体
了解常见问题的解决方案和性能优化建议

在实际开发中，合理使用这些组件可以帮助开发者快速构建美观、高效的用户界面。下一章将介绍图片组件的使用。

人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

鸿蒙 ArkTS 实战：Low Carbon Commute 从低碳通勤到低碳生活记录完整解析

人工智能6S服务平台

鸿蒙 ArkTS 实战：Water Saving Tracker 从节水追踪器到低碳生活记录完整解析

人工智能6S服务平台

鸿蒙 ArkTS 实战：Kitchen Compost Log 从厨余堆肥记录到低碳生活记录完整解析

人工智能6S服务平台

所有评论(0)

查看更多评论

小雨下雨的雨

@m0_66062719

已为社区贡献29条内容

鸿蒙Flutter文本组件与样式(Text, TextStyle)详解

小雨下雨的雨

引言

1. Text组件基础

1.1 Text组件概述

1.2 Text组件构造函数

1.3 核心参数详解

data 参数

textAlign 参数

softWrap 参数

maxLines 参数

overflow 参数

textScaleFactor 参数

2. TextStyle样式系统

2.1 TextStyle概述

2.2 TextStyle构造函数

2.3 常用属性详解

color 属性

fontSize 属性

fontWeight 属性

fontStyle 属性

height 属性

letterSpacing 属性

wordSpacing 属性

decoration 属性

decorationColor 属性

decorationStyle 属性

fontFamily 属性

3. 富文本组件 RichText

3.1 RichText概述

3.2 RichText构造函数

3.3 TextSpan详解

3.4 RichText使用示例

基本示例

价格显示示例

带链接的文本

4. 默认文本样式 DefaultTextStyle

4.1 DefaultTextStyle概述

4.2 使用场景

4.3 DefaultTextStyle.merge

5. 实际应用场景

5.1 场景一：页面标题

5.2 场景二：描述文本

5.3 场景三：价格显示

5.4 场景四：带删除线的原价

5.5 场景五：多行文本溢出处理

6. 自定义字体配置

6.1 添加字体文件

6.2 使用自定义字体

7. 性能优化建议

7.1 避免频繁创建 TextStyle

7.2 合理使用 DefaultTextStyle

7.3 避免不必要的 RichText

8. 常见问题与解决方案

8.1 问题一：文本不换行

8.2 问题二：省略号不显示

8.3 问题三：行高不生效

8.4 问题四：自定义字体不显示

9. 总结

所有评论(0)

温馨提示：您尚未绑定手机号

小雨下雨的雨