Flutter那些事-展示型组件篇

MakeZero
0 阅读5分钟

Text

在 Flutter 中，Text 组件是负责显示文本的核心部件，几乎出现在任何需要展示文字的地方。它非常灵活，既可以显示简单的单一样式文本，也能通过 Text.rich 构建复杂的富文本效果。

1. 核心用法与基本参数

使用 Text 最基本的方式就是创建一个 Text 实例，并传入要显示的字符串。但通过设置不同的参数，可以控制其布局和截断方式。

  • textAlign (文本对齐) ：控制文本在 Text 组件内的水平对齐方式，例如 TextAlign.center（居中）、TextAlign.left（左对齐）。需要注意的是，只有当 Text 组件的宽度大于文本实际内容宽度时，对齐设置才会生效。

  • maxLines (最大行数) ：限制文本最多显示的行数。默认情况下，文本会自动换行。设置此参数后，超出部分的行将不会被显示-1。

  • overflow (溢出处理) ：当文本内容超出 maxLines 限制或父容器约束时，如何处理溢出。常用的有：

    • TextOverflow.ellipsis：用省略号“...”表示被截断的文本。
    • TextOverflow.clip：直接裁剪掉溢出的文本（默认行为）。
    • TextOverflow.fade：将溢出的文本边缘渐隐处理。

  • softWrap (是否软换行) ：决定文本是否在换行符处自动换行。如果设为 false，文本将只占一行，可能导致水平方向溢出。

  • textScaleFactor (文本缩放因子) ：一个快速放大或缩小文本的因子。例如，设为 1.5 会使所有文本放大50%。不过，官方现在更推荐使用 textScaler 来获得更精细的控制。

示例：

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Text组件"),
        ),
        body: Container(
          // 文本居中方式
          alignment: Alignment.center,
          width: double.infinity,
          height: double.infinity,
          color: Colors.amber,
          child: Text.rich(TextSpan(
            text: "Hello",
            children: [
              TextSpan(
                text: "Flutter",style: TextStyle(color: Colors.green)
              ),
              TextSpan(text:"!")
            ],
            style: TextStyle(
              // 字体颜色
              color: Colors.red,
              // 字体大小
              fontSize: 40,
              // 字重
              fontWeight: FontWeight.bold

            )
          )),
          // 当字体显示数量超过对应行数时，其余文本将进行隐藏，并截断文本用...显示。
          // child: Text("今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，今天天气很冷，",
          //   style: TextStyle(
          //     color: Colors.blue,
          //     fontSize: 30
          //   ),
          //   maxLines: 2,
          //   // 溢出隐藏 
          //   overflow: TextOverflow.ellipsis,
          // ),
          // 基础Text组件
          // child:Text("Hello Flutter!",style: TextStyle(
          //   fontSize: 30,
          //   color: Colors.blue,
          //   fontStyle: FontStyle.italic,
          //   fontWeight: FontWeight.w600,
          //   decoration: TextDecoration.underline,
          //   decorationColor: Colors.red
          // ),),
        )
      ),
    );
  }
}

2. 样式定制 (TextStyle)

Text 组件的样式主要通过 style 属性来设置，其值是一个 TextStyle 对象。TextStyle 提供了极其丰富的参数来定义文本的外观-5-10。

  • 基础样式：如 color（颜色）、fontSize（字号）、fontWeight（字重，如粗体）、fontStyle（样式，如斜体）。

  • 间距与行高：

    • letterSpacing 和 wordSpacing 控制字符和单词的间距。
    • height 用于设置行高，它的值是 fontSize 的倍数。例如 height: 1.5 且 fontSize: 20.0，则最终行高为 30.0 逻辑像素。

  • 装饰效果：

    • decoration：添加下划线 (TextDecoration.underline)、删除线 (TextDecoration.lineThrough) 等。
    • decorationColor 和 decorationStyle 分别设置装饰的颜色和样式（如虚线、波浪线）。

  • 高级效果：通过 background 和 foreground 属性，可以使用 Paint 对象实现更复杂的效果，比如给文本添加背景色，或使用渐变色、描边等。

示例：

Text(
  'Hello World',
  style: TextStyle(
    // 字体大小
    fontSize: 24.0,
    // 字体颜色
    color: Colors.blue,
    
    fontWeight: FontWeight.bold,
    // 装饰央视
    decoration: TextDecoration.underline,
    // 字体颜色
    decorationColor: Colors.red,
    // 字符
    decorationStyle: TextDecorationStyle.wavy,
    // 字符间距
    letterSpacing: 2.0,
  ),
)

3. 富文本 (TextSpan 与 Text.rich)

如果一段文本中需要包含多种样式（例如一句话里部分文字是蓝色且可点击），就不能使用普通的 Text 了。这时需要用到 TextSpan 和 Text.rich 构造函数。

TextSpan 代表一个具有独立样式的文本“片段”。多个 TextSpan 可以组合在一起，形成复杂的富文本结构。

  • text：显示的文本。
  • style：显示文本的样式。
  • children：一个 TextSpan 列表，用于嵌套更多的片段。
  • recognizer：为这个片段添加手势识别，比如点击事件。

示例：
以下代码创建了一个带有可点击链接的富文本。

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

Text.rich(
  TextSpan(
    text: '访问 ',
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter 官网',
        style: const TextStyle(color: Colors.blue),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // 处理点击事件，例如打开网页
            print('链接被点击了');
          },
      ),
      TextSpan(text: ' 了解更多。'),
    ],
  ),
)

4. 全局样式管理 (DefaultTextStyle)

在一个页面的多个地方使用相同的文本样式时，如果每个 Text 都单独设置 style，代码会显得冗余。Flutter 提供了 DefaultTextStyle 组件来管理全局或局部的默认文本样式。

DefaultTextStyle 可以包裹一个组件子树，并为其设置默认的 style 和 textAlign。该子树中所有未显式指定样式的 Text 组件，都会自动继承这个默认样式。

示例：

dart

复制下载

// 默认文本样式
DefaultTextStyle(
  style: const TextStyle(
    color: Colors.red,
    fontSize: 20.0,
  ),
  // 文本居中方式
  textAlign: TextAlign.center,
  child: Column(
    children: const [
      Text('这段文字是红色的20号字并居中'), // 继承样式
      Text('我也是同样的样式'),
      Text(
        '但我有不同样式',
        style: TextStyle( // 局部覆盖
          inherit: false, // 可选择不继承默认样式
          color: Colors.grey,
        ),
      ),
    ],
  ),
)

通过设置 inherit: false，子 Text 可以选择完全不继承父级的默认样式。

5. 使用自定义字体

要在应用中使用自定义字体（如非系统默认的字体文件），需要完成两个步骤：

  1. 在 pubspec.yaml 中声明：将字体文件（通常放在 fonts 或 assets 目录下）的路径和样式在配置文件中声明。

    flutter:
  fonts:
    - family: MyCustomFont  # 字体的家族名称
      fonts:
        - asset: fonts/MyCustomFont-Regular.ttf
        - asset: fonts/MyCustomFont-Bold.ttf
          weight: 700  # 指定该文件对应的字重

  2. 在 TextStyle 中使用：通过 fontFamily 属性引用你在 pubspec.yaml 中定义的字体家族名称。

    Text(
  '这是自定义字体',
  style: TextStyle(
    fontFamily: 'MyCustomFont',
    fontSize: 30.0,
  ),
)
avatar
文章
阅读
粉丝