目 录

1. 前言
2. Text 控件概论
3. 基础样式控制：TextStyle
   • 3.1 颜色、字号与字重
   • 3.2 间距、高度与阴影
4. 文本装饰与特效
5. 排版约束：对齐、换行与截断
6. 富文本 (RichText)：多样化排版
7. Text 渲染流程逻辑图
8. Text 常用属性对比表
9. 鸿蒙实战：自适应多端字体适配
10. 总结

---

前言

在任何应用界面（UI）的构建中，信息传递的核心载体始终是文本。无论是鸿蒙系统的设置页面，还是精美的资讯类 App，文本的排版质量直接决定了用户的阅读体验与视觉质感。在 Flutter 这一声明式框架中，Text 控件看似简单，实则内蕴乾坤。它不仅负责字符的显示，更集成了极其精细的排版引擎，能够处理复杂的颜色梯度、阴影叠加、甚至是混合样式的富文本。

对于适配 HarmonyOS 的开发者而言，掌握 Text 控件不仅仅是学会如何改变字号。我们需要深入理解其背后的 TextStyle 属性体系，掌握如何利用阴影打造立体视觉，以及如何在不同尺寸的鸿蒙设备上优雅地处理长文本溢出。文本的艺术在于细节，一个像素的行高调整、一个微妙的字间距设定，往往就是“普通应用”与“高端应用”的分水岭。本文将带你深度剖析 Flutter 文本体系，开启一段排版艺术的探索之旅。

---

Text 控件概论

Text 控件是 Flutter 中使用频率最高的组件。它本质上是对底层段落布局引擎（Paragraph）的封装。通过配置 data 参数和 style 属性，我们可以快速实现从极简标签到复杂排版的所有效果。

---

基础样式控制：TextStyle

所有的视觉魔法都集中在 TextStyle 对象中。

3.1 颜色、字号与字重

Text(
  "鸿蒙 NEXT",
  style: TextStyle(
    color: Colors.blueAccent,   // 颜色
    fontSize: 28.0,            // 字号
    fontWeight: FontWeight.w900, // 字重（粗细）
  ),
)

3.2 间距、高度与阴影

为了让文本更具表现力，我们可以调整其物理属性：

• letterSpacing: 字符之间的间距。
• height: 行高比例，常用于调整段落的呼吸感。
• shadows: 阴影列表，支持多重投影。

TextStyle(
  shadows: [
    Shadow(
      blurRadius: 3.0,
      color: Colors.black38,
      offset: Offset(2.0, 2.0),
    ),
  ],
)

---

文本装饰与特效

Dart 支持丰富的文本装饰线（Decoration），可以实现下划线、删除线及其虚线效果。

装饰类型	效果代码示例
下划线	decoration: TextDecoration.underline
删除线	decoration: TextDecoration.lineThrough
虚线样式	decorationStyle: TextDecorationStyle.dashed

---

排版约束：对齐、换行与截断

当文本长度超出容器时，我们需要明确的处理策略：

Text(
  "这是一段长文本...",
  textAlign: TextAlign.center,      // 文本对齐
  maxLines: 2,                     // 最大行数
  overflow: TextOverflow.ellipsis, // 溢出处理：省略号
  softWrap: true,                  // 是否自动换行
)

---

富文本 (RichText)：多样化排版

在实际开发中，经常需要在一行文字中展示不同的样式（如隐私政策中的蓝色链接）。此时，应使用 Text.rich 或 RichText。

Text.rich(
  TextSpan(
    text: "阅读并同意 ",
    children: [
      TextSpan(
        text: "《隐私协议》",
        style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
      ),
    ],
  ),
)

---

Text 渲染流程逻辑图

理解文本是如何从字符串变成屏幕上的像素：

---

Text 常用属性对比表

为了更加合理的说明内容，下表总结了 Text 及其核心样式的关键属性：

属性分类	核心参数	描述	推荐场景
视觉样式	color / fontSize	颜色与大小	全局基础排版
结构控制	height / letterSpacing	行高与字间距	提升阅读体验
溢出策略	overflow / maxLines	截断与限制	列表展示、标题行
对齐逻辑	textAlign	水平方向对齐	居中标题、段落两端对齐
多态混合	Text.rich	片段化样式	协议条款、搜索关键字高亮

---

鸿蒙实战：自适应多端字体适配

在 HarmonyOS 的多元设备生态（如智慧屏、平板、手机）中，建议使用媒体查询动态调整字号：

double dynamicSize = MediaQuery.of(context).size.width * 0.05;
Text(
  "动态适配文本",
  style: TextStyle(fontSize: dynamicSize),
)

---

总结

Text 控件是 Flutter UI 开发的基石。通过对 TextStyle 的深度运用，我们能够实现从基础文字显示到高级立体特效、装饰排版的跨越。在适配鸿蒙系统时，我们应充分利用 Text.rich 来处理复杂的交互协议文本，并善用 overflow 策略来保证界面的整洁度。

记住，好的 UI 往往源于对文本细节的极致追求。一个合理的行高（height）通常在 1.2 到 1.5 之间，它能让你的应用在鸿蒙的高清屏幕上显得更加通透与高级。在掌握了文本的力量后，下一篇我们将迎来 Flutter UI 的“万能选手”——Container (容器)，学习如何为文本打造精美的“外衣”。

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