案例概述

TextStyle 是 Flutter 中用于定义文本外观的核心类，可以控制字体家族、字号、颜色、粗细、行高、字间距、装饰线等多种属性。几乎所有文本组件（如 Text、RichText）都会依赖 TextStyle 来呈现最终效果。在实际项目中，文本样式不仅影响阅读体验，还直接关系到品牌一致性、信息层级（标题/正文/说明）、可访问性（可读性、对比度）等关键指标。本案例将通过一组基础示例，演示如何创建和组合不同的文本样式，并结合高级话题说明如何在大中型项目中管理统一的文本样式体系、支持深浅色主题、响应式字号以及多语言场景。通过学习本案例，你可以为应用构建一套清晰、可维护、可扩展的文本样式规范。

核心概念

1. TextStyle 基础

TextStyle 是一个不可变的样式描述类，用于定义文本的外观。它包含 fontSize、fontWeight、fontStyle、color、letterSpacing、height、decoration 等属性。TextStyle 通常通过 Text 的 style 参数传入，也可以通过 Theme.of(context).textTheme 统一管理。在实际开发中，推荐将常用的标题、正文、说明等样式抽象为统一的命名样式，避免在代码中到处硬编码 fontSize 和 color，保证全局易于维护和修改。

2. 字体和大小

字体家族（fontFamily）和字号（fontSize）是文本样式最基本的两个维度。fontFamily 决定文本的整体风格，例如系统默认字体、自定义品牌字体或等宽字体等；fontSize 则影响阅读舒适度和信息层级。通常会为应用定义一套“排版层级”，如 H1/H2/H3 标题、正文、大号按钮文字、说明文字等，每个层级都有固定的字号和行高。在国际化场景下，不同语言的默认字体和字号可能略有差异，需要在设计阶段统一规划。

3. 颜色和装饰

颜色（color）和装饰（decoration）用于表达状态和语义，例如普通文本、强调文本、链接、错误提示等。通过不同的颜色组合和装饰线（如下划线、删除线、上划线）可以清晰地区分多种类型的信息。需要注意的是，颜色选择必须兼顾主题模式（浅色/深色）和无障碍对比度要求；对于链接、错误等状态，通常会同时使用颜色与装饰线双重提示，以便色觉障碍用户也能正确识别。

代码详解

示例 1：基础文本样式

class BasicTextStyleExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      '基础文本',
      style: TextStyle(
        fontSize: 16,
        color: Colors.black,
      ),
    );
  }
}

代码解释： 这个示例展示了最基础的文本样式用法。Text 组件通过 style 参数接收一个 TextStyle，其中 fontSize 设置为 16 表示中等字号，color 设置为 Colors.black 表示使用纯黑色文本。这样的样式通常用作通用正文或说明文本。在真实项目中，建议将这种“基础文本样式”提取到 ThemeData 的 textTheme（如 bodyMedium）中，通过 Theme.of(context).textTheme.bodyMedium 使用，而不是在每个 Text 上手动写 16 和黑色，这样当你需要整体调整字号或颜色时，只需要修改一处配置即可全局生效。

示例 2：粗体文本

class BoldTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      '粗体文本',
      style: TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
      ),
    );
  }
}

代码解释： 这个示例通过 fontWeight: FontWeight.bold 将文本渲染为粗体，并将字号设置为 18，使其在视觉上更突出，常用于小标题或强调内容。FontWeight 还有多种级别（w100–w900），可以根据设计规范选择合适的粗细。在企业级项目中，通常会为“主标题、二级标题、强调文字”定义不同的 fontSize 和 fontWeight 组合，并统一收敛到 textTheme.headlineSmall、titleMedium 等命名样式中，避免到处散落着 magic number（如 18、20、22）和随意的粗细值。

示例 3：斜体文本

class ItalicTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      '斜体文本',
      style: TextStyle(
        fontSize: 16,
        fontStyle: FontStyle.italic,
      ),
    );
  }
}

代码解释： 这个示例通过 fontStyle: FontStyle.italic 将文本设置为斜体，字号为 16。斜体通常用于表示引用、术语、外文单词或辅助说明文本。需要注意的是，不同平台和字体对斜体的渲染效果可能略有差异，有些字体甚至不提供真实斜体，而是由系统模拟。在设计和实现时，应避免用斜体作为传达关键信息的唯一手段，可以结合颜色、大小或前缀图标等手段共同表达语义。

示例 4：删除线文本

class StrikethroughTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      '删除线文本',
      style: TextStyle(
        fontSize: 16,
        decoration: TextDecoration.lineThrough,
      ),
    );
  }
}

代码解释： 这个示例通过 decoration: TextDecoration.lineThrough 为文本添加了一条删除线，常用于表示“已过期”“已下架”“原价”等状态。配合不同的颜色（例如使用较淡的灰色）可以弱化该文本的重要性，同时保留信息供用户参考。在电商、订阅、权限管理等场景中，删除线文本经常与正常价格或当前状态并排出现，需要注意保持两者之间的对比度和布局协调，避免造成视觉混乱。

示例 5：下划线文本

class UnderlineTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      '下划线文本',
      style: TextStyle(
        fontSize: 16,
        decoration: TextDecoration.underline,
      ),
    );
  }
}

代码解释： 这个示例通过 decoration: TextDecoration.underline 为文本添加下划线效果。下划线常被用户默认理解为“可点击的链接”或“可交互的内容”，因此在设计中使用下划线时需要非常谨慎。如果只是用于普通强调，建议优先使用粗体或颜色变化；如果确实是可点击链接，还应配合手型光标（Web/桌面）、点击反馈和可访问性描述（如语义标签）一同使用，避免误导用户。

高级话题

1. 动态/响应式设计

在响应式设计中，文本样式需要根据屏幕尺寸和观看距离进行动态调整。小屏手机上字号过小会影响阅读，而在大屏平板或桌面上，太小的文字又会导致信息密度过高。可以使用 MediaQuery 或自适应字号方案（如根据屏幕宽度计算基准字号）动态计算 fontSize，或通过不同的 textTheme 配置为 mobile/tablet/desktop 提供不同的排版层级。

2. 动画与过渡

在状态切换或引导用户注意力时，可以对文本样式应用动画。例如使用 AnimatedDefaultTextStyle 或 AnimatedSwitcher 来平滑过渡字号、颜色、粗细等，从而实现“数值变化高亮”“步骤切换标题变化”等效果。合理的动画可以提升专业感，但需要注意控制频率和时长，避免造成干扰或影响性能。

3. 搜索/过滤/排序

在搜索结果和过滤列表中，文本样式可以用来高亮匹配关键字、区分主信息和附加信息。例如，主标题使用加粗和更大字号，关键字部分使用高亮颜色或背景，附属信息（时间、标签等）使用较小字号和次要颜色。对于排序字段，可以通过颜色或粗体提示当前排序依据，让用户更直观地理解结果结构。

4. 选择与批量操作

在支持多选或批量操作的界面中，文本样式可以辅助表达“已选中”或“半选中”等状态。例如，在复选列表中，为选中的项目标题应用更醒目的颜色或粗体，而未选中项使用中性颜色。批量操作栏中的文本也可以在激活/禁用时切换不同透明度或颜色，以强化状态感知。

5. 加载与缓存

在加载过程中，可以使用占位文本样式（如灰色、较浅的颜色）配合骨架屏来表示内容尚未就绪；当数据来自缓存时，可以通过轻微的颜色差异或附加说明文本提示“离线数据”“缓存数据”。在实时刷新数据的场景（如行情、监控面板）中，也可以通过短暂的颜色高亮来提示数据刚刚更新。

6. 键盘导航

在支持键盘导航的桌面或 Web 应用中，焦点所在元素的文本样式可以适当增强，如略微加粗或改变颜色，以提高可见性。同时，快捷键提示文本（如“Ctrl+S 保存”）通常会使用等宽字体或统一的样式，方便用户快速识别。通过统一的样式约定，可以让键盘操作更直观。

7. 无障碍支持

无障碍设计中，文本样式的可读性尤为关键。需要确保字号足够大、行高合理、颜色对比度符合标准，同时避免长时间使用全大写、过度斜体或花哨字体。对于链接、错误、警告等语义，除了颜色和装饰线，还应提供语义标签（如 Semantics）和可读的辅助文本，确保使用屏幕阅读器的用户也能准确理解信息。

8. 样式自定义

在企业级项目中，通常会为文本样式建立一套完整的设计系统，将 TextStyle 抽象为命名规范（如 displayLarge、headlineMedium、bodySmall 等），并通过 ThemeData 和 TextTheme 集中管理。业务组件不直接写具体的字号和颜色，只引用这些命名样式，从而保证在品牌升级或主题切换时，只需调整一处配置即可覆盖全局。

9. 数据持久化/导出

当应用支持用户自定义字号或主题时，需要将相关的文本样式偏好（如基础字号、是否开启大字体模式）持久化到本地或服务端，以便在多设备之间保持一致体验。在导出报表、PDF 或截图时，也要确保 TextStyle 中的关键属性（字号、粗细、颜色等）被正确还原，避免线上线下样式不一致。

10. 单元测试与集成测试

在 Widget 测试中，可以通过查找 Text 组件并断言其 style 是否符合预期，例如检查颜色是否为错误红、标题字号是否为指定值。在集成测试中，则可以通过截图对比或黄金测试（golden test）验证不同主题、不同语言下文本样式是否与设计稿一致，避免因代码修改导致的文字溢出、对比度不足等问题。

PC 端适配要点

• 根据屏幕大小调整文本大小：桌面端通常观看距离更远、屏幕更大，可以适当增加标题字号和行高，同时保持正文字号在易读范围内。可以为桌面端单独配置一套 textTheme。

• 高分辨率与缩放支持：在高 DPI 显示器和系统缩放场景下，需要验证文本在不同缩放比例下是否依然清晰、不糊不锯齿，必要时调整字号和行高以获得最佳阅读体验。

• 键盘与鼠标结合：PC 端文本经常伴随鼠标悬停提示（tooltip）和键盘快捷键说明，应为这些附加文本设计统一的样式，如较小字号、灰色说明文字等。

实际应用场景

• 标题样式：用于页面标题、模块标题、弹窗标题等，通常字号较大、粗体，颜色与品牌主色系协调，帮助用户快速建立信息层级。

• 正文样式：用于主体内容展示，如文章、说明文字、表单标签等，需要在长时间阅读时保持舒适，通常使用中等字号和中等粗细。

• 强调样式：用于高亮关键数字、重要提示、价格等，可以通过颜色、粗体或略大字号实现，注意不要过度使用，以免削弱强调效果。

• 链接样式：用于可点击文本链接，常见做法是使用主题色加下划线，并在桌面端配合手型光标和点击反馈。

• 状态提示样式：如错误、警告、成功等提示文本，使用统一的颜色体系（红、橙、绿）和合适的字号，让用户一眼区分不同状态。

扩展建议

• 学习排版与设计规范：阅读 Material Design Typography、Apple HIG 等官方排版指南，理解字号、行高、字间距在阅读体验中的作用。

• 研究性能与可读性平衡：大量富文本和复杂样式可能带来性能问题，应在视觉效果和渲染开销之间找到平衡点，必要时使用 RichText 精细控制。

• 探索多语言支持：在多语言场景中，不同文字的字形和长度差别较大，需要针对中英文、阿拉伯文等语言分别验证字号和行高，必要时做适配。

• 集成主题与样式库：将文本样式集中到主题或独立样式库中，结合暗黑模式、品牌换肤等功能，构建可配置的文本样式系统。

总结

TextStyle 是 Flutter 文本系统的核心，决定了文本在应用中的最终呈现效果。通过合理规划字体家族、字号、颜色、粗细和装饰线，并将这些样式抽象为统一可复用的命名样式，可以在保证品牌一致性和可读性的同时，大幅提升项目的可维护性。配合主题系统、响应式设计和无障碍规范，TextStyle 不再只是简单的“文字美化工具”，而是构建专业、可靠用户体验的重要基石。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net