flutter学习第 5 节：文本与样式

文本是任何应用程序中最基础也是最重要的元素之一。在 Flutter 中，文本的展示和样式控制非常灵活，能够满足各种复杂的 UI 需求。本节课将详细介绍 Flutter 中与文本相关的核心组件和样式控制方法，帮助你掌握文本的各种展示技巧。

一、Text 组件属性详解

Text 组件是 Flutter 中用于显示文本的基础组件，它提供了丰富的属性来控制文本的外观和行为。

基本属性

Text(
  "Hello Flutter", // 要显示的文本内容
  style: TextStyle(...), // 文本样式
  textAlign: TextAlign.center, // 文本对齐方式
  textDirection: TextDirection.ltr, // 文本方向（从左到右/从右到左）
  softWrap: true, // 是否自动换行
  overflow: TextOverflow.ellipsis, // 文本溢出处理方式
  maxLines: 2, // 最大行数
  textScaleFactor: 1.0, // 文本缩放因子
  semanticsLabel: "Hello Flutter", // 语义化标签，用于辅助功能
)

常用属性详解

1. textAlign - 文本对齐方式

// 可选值
TextAlign.left      // 左对齐
TextAlign.right     // 右对齐
TextAlign.center    // 居中对齐
TextAlign.justify   // 两端对齐
TextAlign.start     // 按文本方向起始端对齐
TextAlign.end       // 按文本方向末端对齐

2. overflow - 文本溢出处理

// 常用值
TextOverflow.clip      // 裁剪溢出部分
TextOverflow.fade      // 溢出部分渐隐
TextOverflow.ellipsis  // 溢出部分显示省略号(...)
TextOverflow.visible   // 允许溢出显示

3. softWrap - 自动换行控制

   • true（默认）：文本超过容器宽度时自动换行
   • false：文本不换行，可能导致溢出

4. maxLines - 最大行数限制

   • 设置为 null 时无限制（默认）
   • 配合 overflow 属性使用，控制超出行数的文本处理方式

---

二、TextStyle 样式控制

TextStyle 是控制文本外观的核心类，几乎所有文本相关的样式都通过它来定义。

常用样式属性

TextStyle(
  fontSize: 16.0, // 字体大小，默认14
  color: Colors.black87, // 文本颜色
  fontWeight: FontWeight.w400, // 字体粗细
  fontStyle: FontStyle.normal, // 字体样式（正常/斜体）
  letterSpacing: 0.5, // 字母间距
  wordSpacing: 2.0, // 单词间距
  height: 1.5, // 行高，与字体大小的倍数关系
  backgroundColor: Colors.yellow, // 背景色
  decoration: TextDecoration.none, // 文本装饰（下划线等）
  decorationColor: Colors.red, // 装饰线颜色
  decorationStyle: TextDecorationStyle.solid, // 装饰线样式
  fontFamily: "Roboto", // 字体家族
  shadows: [ // 文本阴影
  Shadow(
    color: Colors.grey,
    offset: Offset(1, 1),
    blurRadius: 2,
    )
  ],
)

字体粗细（fontWeight）

FontWeight 定义了文本的粗细程度，常用值包括：

• FontWeight.w100 - 最细
• FontWeight.w300 - 细
• FontWeight.w400 - 正常（默认）
• FontWeight.w500 - 中等
• FontWeight.w700 - 粗体
• FontWeight.w900 - 最粗
• 快捷方式：FontWeight.bold 等价于 FontWeight.w700

文本装饰（decoration）

可以为文本添加各种装饰线：

TextDecoration.none        // 无装饰
TextDecoration.underline   // 下划线
TextDecoration.overline    // 上划线
TextDecoration.lineThrough // 删除线

装饰线样式（decorationStyle）：

TextDecorationStyle.solid   // 实线（默认）
TextDecorationStyle.dashed  // 虚线
TextDecorationStyle.dotted  // 点线
TextDecorationStyle.double  // 双线
TextDecorationStyle.wavy    // 波浪线

---

三、DefaultTextStyle 样式复用

在实际开发中，我们经常需要在应用的不同部分保持一致的文本样式。DefaultTextStyle 允许我们为整个 Widget 子树设置默认文本样式，实现样式复用。

基本用法

DefaultTextStyle(
  // 设置默认文本样式
  style: const TextStyle(
    color: Colors.grey,
    fontSize: 14,
    fontFamily: 'sans-serif',
  ),
  // 文本对齐方式
  textAlign: TextAlign.start,
  // 最大行数
  maxLines: 2,
  // 溢出处理
  overflow: TextOverflow.ellipsis,
  // 子Widget树
  child: Column(
    children: const [
      Text("这行文本会使用默认样式"),
      Text("这行文本也会使用默认样式"),
      // 可以覆盖默认样式
      Text(
        "这行文本会使用自定义样式",
        style: TextStyle(
          color: Colors.blue,
          fontSize: 16,
        ),
      ),
    ],
  ),
)

实际应用场景

DefaultTextStyle 特别适合用于列表、卡片等包含多个文本元素的组件，可以统一设置基础样式，需要特殊样式的地方再单独设置，既保证了一致性，又保留了灵活性。

---

四、富文本 RichText 与 TextSpan

当需要在一段文本中使用多种不同样式时，Text 组件就无法满足需求了。这时我们需要使用 RichText 配合 TextSpan 来实现富文本效果。

RichText 基本用法

RichText(
  text: TextSpan(
    // 基础样式，子TextSpan会继承此样式
    style: const TextStyle(color: Colors.black87, fontSize: 16),
    children: [
      const TextSpan(text: "这是一段"),
      TextSpan(
        text: "红色粗体",
        style: const TextStyle(
          color: Colors.red,
          fontWeight: FontWeight.bold,
        ),
        // 可以添加点击事件
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            print("点击了红色粗体文本");
          },
      ),
      const TextSpan(text: "的文本，其中"),
      TextSpan(
        text: "这段有下划线",
        style: const TextStyle(
          decoration: TextDecoration.underline,
          color: Colors.blue,
        ),
      ),
      const TextSpan(text: "。"),
    ],
  ),
  // 文本对齐方式
  textAlign: TextAlign.center,
)

TextSpan 嵌套使用

TextSpan 可以嵌套使用，实现更复杂的文本结构：

RichText(
  text: TextSpan(
    style: const TextStyle(color: Colors.black, fontSize: 16),
    children: [
      const TextSpan(text: "用户协议：\n\n"),
      TextSpan(
        children: [
          const TextSpan(text: "1. "),
          const TextSpan(
            text: "本协议",
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          const TextSpan(text: "适用于所有用户。\n"),
        ],
      ),
      TextSpan(
        children: [
          const TextSpan(text: "2. 用户必须遵守"),
          TextSpan(
            text: "服务条款",
            style: const TextStyle(color: Colors.blue),
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                // 跳转到服务条款页面
              },
          ),
          const TextSpan(text: "和相关规定。"),
        ],
      ),
    ],
  ),
)

实际应用场景

富文本常用于：

• 包含不同样式的文本段落（如协议文本）
• 带有高亮部分的文本（如搜索结果）
• 可点击的文本链接（如隐私政策链接）
• 混合图标和文本（通过 WidgetSpan）

WidgetSpan 混合 Widget 和文本

WidgetSpan 允许在文本中插入其他 Widget，实现图文混排效果：

RichText(
  text: TextSpan(
    style: const TextStyle(color: Colors.black, fontSize: 16),
    children: [
      const TextSpan(text: "您的积分："),
      WidgetSpan(
        child: Icon(Icons.star, color: Colors.yellow[700], size: 18),
      ),
      const TextSpan(
        text: " 1250",
        style: TextStyle(
          color: Colors.orange,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
)

---

五、字体导入与自定义字体

Flutter 支持使用自定义字体，让你的应用拥有独特的文字风格。使用自定义字体需要以下步骤：

步骤 1：准备字体文件

1. 在项目根目录创建 fonts 文件夹（如果不存在）
2. 将字体文件（通常是 .ttf 或 .otf 格式）放入该文件夹
3. 建议为不同字重 / 样式创建子文件夹，保持结构清晰：

fonts/
  OpenSans/
    OpenSans-Regular.ttf
    OpenSans-Bold.ttf
    OpenSans-Italic.ttf

步骤 2：在 pubspec.yaml 中配置字体

打开项目根目录的 pubspec.yaml 文件，添加字体配置：

flutter:
  fonts:
    - family: OpenSans  # 字体家族名称，用于在代码中引用
      fonts:
        - asset: fonts/OpenSans/OpenSans-Regular.ttf  # 常规字体
        - asset: fonts/OpenSans/OpenSans-Bold.ttf
          weight: 700  # 粗体字重
        - asset: fonts/OpenSans/OpenSans-Italic.ttf
          style: italic  # 斜体样式

配置说明：

• family：字体家族名称，在 TextStyle 的 fontFamily 属性中使用
• asset：字体文件相对于项目根目录的路径
• weight：可选，指定字重（100-900）
• style：可选，指定样式（normal/italic）

配置完成后，运行 flutter pub get 使配置生效。

步骤 3：使用自定义字体

在 TextStyle 中通过 fontFamily 属性引用自定义字体：

Text(
  "使用自定义字体的文本",
  style: TextStyle(
    fontFamily: "OpenSans",  // 匹配pubspec.yaml中的family
    fontSize: 20,
  ),
)

// 使用粗体变体
Text(
  "自定义字体的粗体文本",
  style: TextStyle(
    fontFamily: "OpenSans",
    fontWeight: FontWeight.w700,  // 匹配配置中的weight
    fontSize: 20,
  ),
)

// 使用斜体变体
Text(
  "自定义字体的斜体文本",
  style: TextStyle(
    fontFamily: "OpenSans",
    fontStyle: FontStyle.italic,  // 匹配配置中的style
    fontSize: 20,
  ),
)

步骤 4：设置全局默认字体

如果希望整个应用使用自定义字体，可以通过 ThemeData 配置：

MaterialApp(
  title: '自定义字体示例',
  theme: ThemeData(
    // 设置全局字体
    fontFamily: 'OpenSans',
    // 其他主题配置...
  ),
  home: const MyHomePage(),
)

---

六、文本相关实用技巧

1. 响应式字体大小

根据不同屏幕尺寸自动调整字体大小：

// 使用MediaQuery获取屏幕信息
Text(
  "响应式字体",
  style: TextStyle(
    fontSize: MediaQuery.of(context).size.width * 0.05, // 屏幕宽度的5%
  ),
)

// 使用FittedBox自动适应容器
Container(
  width: 100,
  child: FittedBox(
    fit: BoxFit.scaleDown,
    child: Text("这段文本会自动缩小以适应容器宽度"),
  ),
)

2. 文本间距与行高调整

Text(
  "调整行高和字间距的示例文本。"
  "这是第二行文本，用于演示行高效果。",
  style: TextStyle(
    fontSize: 16,
    letterSpacing: 1.2, // 字间距
    wordSpacing: 3.0, // 单词间距
    height: 1.8, // 行高，是字体大小的倍数
  ),
  textAlign: TextAlign.justify,
)

3. 文本选择与复制

默认情况下，Text 组件的文本是不可选中的。要启用文本选择功能，可以使用 SelectableText：

SelectableText(
  "这段文本可以被选中和复制。"
  "长按文本可以显示上下文菜单，进行复制等操作。",
  style: const TextStyle(fontSize: 16),
  cursorColor: Colors.blue, // 光标颜色
  selectionColor: Colors.blue.withOpacity(0.2), // 选中文本背景色
  onSelectionChanged: (selection, cause) {
    // 选中状态变化时的回调
    print("选中的文本: ${selection.textInside('这段文本可以被选中和复制。长按文本可以显示上下文菜单，进行复制等操作。')}");
  },
)