Flutter开发指南

Appearance

Text / RichText ​

Text 用于显示文本，RichText 用于显示包含多种样式的富文本。

Text ​

构造函数 ​

dart
Text(
  String data, {                                          // 文本内容（必填）
  Key? key,                                               // 组件标识
  TextStyle? style,                                       // 文本样式（字号、颜色、粗细等）
  StrutStyle? strutStyle,                                 // 基线间距样式（控制行高的最小值）
  TextAlign? textAlign,                                   // 对齐方式（left/center/right/start/end/justify）
  TextDirection? textDirection,                            // 文本方向（ltr/rtl）
  Locale? locale,                                         // 区域设置（影响字体选择）
  bool? softWrap,                                         // 是否自动换行（true=换行，false=单行溢出）
  TextOverflow? overflow,                                 // 超出处理（ellipsis/clip/fade/visible）
  double? textScaleFactor,                                 // 文本缩放因子（1.0=原始大小）
  int? maxLines,                                          // 最大行数（null=不限制）
  String? semanticsLabel,                                 // 语义标签（用于无障碍）
  TextWidthBasis? textWidthBasis,                         // 文本宽度计算方式（parent/longestLine）
})

属性速查 ​

属性类型默认值说明
dataString必填文本内容
styleTextStyle?null文本样式
textAlignTextAlign?null对齐方式
overflowTextOverflow?null超出处理
maxLinesint?null最大行数
softWrapbool?null是否自动换行
textScaleFactordouble?null文本缩放因子
textDirectionTextDirection?null文本方向
localeLocale?null区域设置
strutStyleStrutStyle?null基线间距样式
semanticsLabelString?null语义标签
textWidthBasisTextWidthBasis?null文本宽度计算方式

常用值速查 ​

textAlign — 对齐方式 ​

值效果
left左对齐（默认，LTR 语言）
center居中
right右对齐
justify两端对齐
start文本起始方向
end文本结束方向

overflow — 超出处理 ​

值效果
ellipsis省略号 "一段很长..."
clip裁剪
fade渐隐
visible可见（超出部分仍然显示）

TextStyle 常用属性速查 ​

属性类型说明
fontSizedouble字号
fontWeightFontWeight粗细：w100~w900、bold、normal
colorColor文字颜色
backgroundColorColor背景色
heightdouble行高（字号的倍数，如 1.5）
letterSpacingdouble字间距
wordSpacingdouble词间距
decorationTextDecorationunderline、lineThrough、overline、none
decorationColorColor装饰线颜色
decorationStyleTextDecorationStylesolid、double、dashed、dotted、wavy
decorationThicknessdouble装饰线粗细
fontStyleFontStyleitalic（斜体）、normal
shadowsList<Shadow>文字阴影
fontFamilyString字体名称

快速示例 ​

基本文本 ​

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

class TextBasicExample extends StatelessWidget {
  const TextBasicExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Text 基本示例')),
      body: const Center(
        // ─── ★ 基本文本 ──────────────
        child: Text('Hello Flutter!'),
        // ─── ☆ 基本文本 ──────────────
      ),
    );
  }
}

完整样式 ​

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

class TextStyleExample extends StatelessWidget {
  const TextStyleExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Text 样式示例')),
      body: Center(
        // ─── ★ TextStyle 完整属性 ──────────────
        child: Text(
          'Hello Flutter!',
          style: TextStyle(
            fontSize: 16,                     // 字号
            fontWeight: FontWeight.bold,      // 粗细
            color: Colors.blue,               // 颜色
            backgroundColor: Colors.yellow,   // 背景色
            letterSpacing: 1.5,               // 字间距
            wordSpacing: 2,                   // 词间距
            height: 1.5,                      // 行高（倍数）
            decoration: TextDecoration.underline, // 下划线
            decorationColor: Colors.red,      // 下划线颜色
            decorationStyle: TextDecorationStyle.dashed, // 虚线
            decorationThickness: 2,           // 下划线粗细
            fontStyle: FontStyle.italic,      // 斜体
          ),
          textAlign: TextAlign.center,        // 对齐方式
          maxLines: 2,                        // 最大行数
          overflow: TextOverflow.ellipsis,    // 超出省略号
        ),
        // ─── ☆ TextStyle 完整属性 ──────────────
      ),
    );
  }
}

超出省略 ​

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

class TextOverflowExample extends StatelessWidget {
  const TextOverflowExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Text 超出省略')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            // ─── ★ maxLines + overflow ──────────────
            Text(
              '这是一段很长很长很长很长的文本内容，会超出容器宽度显示省略号',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
            // ─── ☆ maxLines + overflow ──────────────
            SizedBox(height: 16),
            Text(
              '这段文本限制两行显示，超出部分会以省略号结尾。这是一段很长很长很长很长的文本内容。',
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    );
  }
}

RichText / Text.rich ​

用于显示一段文本中包含多种样式的富文本。

Text.rich 构造函数 ​

dart
Text.rich(
  InlineSpan textSpan, {                                  // 文本段落（必填）
  Key? key,                                               // 组件标识
  TextStyle? style,                                       // 默认文本样式
  StrutStyle? strutStyle,                                 // 基线间距样式
  TextAlign? textAlign,                                   // 对齐方式
  TextDirection? textDirection,                            // 文本方向
  Locale? locale,                                         // 区域设置
  bool? softWrap,                                         // 是否自动换行
  TextOverflow? overflow,                                 // 超出处理
  double? textScaleFactor,                                 // 文本缩放因子
  int? maxLines,                                          // 最大行数
  String? semanticsLabel,                                 // 语义标签
  TextWidthBasis? textWidthBasis,                         // 文本宽度计算方式
})

TextSpan 构造函数 ​

dart
TextSpan({
  String? text,                                           // 文本内容
  TextStyle? style,                                       // 文本样式
  List<InlineSpan>? children,                             // 子文本段落
  GestureRecognizer? recognizer,                          // 点击手势识别器
  String? semanticsLabel,                                 // 语义标签
})

快速示例 ​

价格样式 ​

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

class PriceTextExample extends StatelessWidget {
  const PriceTextExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RichText 价格示例')),
      body: Center(
        // ─── ★ Text.rich + TextSpan ──────────────
        child: Text.rich(
          TextSpan(
            text: '价格: ',
            style: const TextStyle(fontSize: 14, color: Colors.grey),
            children: [
              TextSpan(
                text: '¥',
                style: TextStyle(fontSize: 14, color: Colors.red, fontWeight: FontWeight.bold),
              ),
              TextSpan(
                text: '128',
                style: const TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),
              ),
              TextSpan(
                text: '.00',
                style: const TextStyle(fontSize: 14, color: Colors.red, fontWeight: FontWeight.bold),
              ),
            ],
          ),
        ),
        // ─── ☆ Text.rich + TextSpan ──────────────
      ),
    );
  }
}

可点击的文本 ​

内存泄漏警告

使用 TapGestureRecognizer 时，如果不调用 dispose() 会导致内存泄漏。生产环境代码务必放在 StatefulWidget 中并正确释放。

dart
class ClickableText extends StatefulWidget {
  const ClickableText({super.key});

  @override
  State<ClickableText> createState() => _ClickableTextState();
}

class _ClickableTextState extends State<ClickableText> {
  late final TapGestureRecognizer _recognizer;

  @override
  void initState() {
    super.initState();
    _recognizer = TapGestureRecognizer()
      ..onTap = () {
        Navigator.pushNamed(context, '/login');
      };
  }

  @override
  void dispose() {
    _recognizer.dispose();  // 必须释放！
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        children: [
          const TextSpan(text: '已有账号？'),
          TextSpan(
            text: '去登录',
            style: const TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
            recognizer: _recognizer,
          ),
        ],
      ),
    );
  }
}

DefaultTextStyle ​

为子树中的所有 Text 组件提供默认样式：

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

class DefaultTextStyleExample extends StatelessWidget {
  const DefaultTextStyleExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('DefaultTextStyle 示例')),
      body: DefaultTextStyle(
        // ─── ★ DefaultTextStyle ──────────────
        style: const TextStyle(
          fontSize: 14,
          color: Colors.black87,
        ),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text('自动应用默认样式'),     // 使用 DefaultTextStyle 的样式
              const Text('我也是'),              // 同上
              // ─── ★ 覆盖默认样式 ──────────────
              Text('我覆盖了', style: TextStyle(
                color: Colors.red,
                fontWeight: FontWeight.bold,
              )),
              // ─── ☆ 覆盖默认样式 ──────────────
            ],
          ),
        ),
        // ─── ☆ DefaultTextStyle ──────────────
    );
  }
}

主题中的文字样式 ​

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

class ThemeTextExample extends StatelessWidget {
  const ThemeTextExample({super.key});

  @override
  Widget build(BuildContext context) {
    // ─── ★ 从主题获取文字样式 ──────────────
    final textTheme = Theme.of(context).textTheme;
    // ─── ☆ 从主题获取文字样式 ──────────────

    return Scaffold(
      appBar: AppBar(title: const Text('主题文字样式')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('大标题', style: textTheme.displayLarge),
            Text('标题', style: textTheme.headlineMedium),
            Text('小标题', style: textTheme.titleMedium),
            Text('正文（大）', style: textTheme.bodyLarge),
            Text('正文（中）', style: textTheme.bodyMedium),
            Text('正文（小）', style: textTheme.bodySmall),
            Text('标签', style: textTheme.labelLarge),
          ],
        ),
      ),
    );
  }
}

基于 Flutter 官方文档整理

MIT License