Flutter Text 文本及字体样式完全指南

Text(
  'Hello world',
  style: TextStyle(fontSize: 16),
);

const Text(
  this.data, {
  Key key,
  this.style,
  this.strutStyle,
  this.textAlign,
  this.textDirection,
  this.locale,
  this.softWrap,
  this.overflow,
  this.textScaleFactor,
  this.maxLines,
  this.semanticsLabel,
  this.textWidthBasis,
}) : assert(
       data != null,
       'A non-null String must be provided to a Text widget.',
     ),
     textSpan = null,
     super(key: key);

Text(
  'Hello Flutter',
  strutStyle: StrutStyle(
    fontSize: 16,
    height: 1.5,
    leading: 0.5,
    fontWeight: FontWeight.w500,
  ),
);

Text(
  '这是一段很长很长很长很长很长很长的文本内容，用于演示文本溢出效果',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Text 示例')),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              // 基本文本
              Text('Hello Flutter!'),

              // 设置样式
              Text(
                '带样式的文本',
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.blue,
                  fontWeight: FontWeight.bold,
                ),
              ),

              // 带删除线
              Text(
                '删除线文本',
                style: TextStyle(
                  decoration: TextDecoration.lineThrough,
                  decorationColor: Colors.red,
                ),
              ),

              // 带下划线
              Text(
                '下划线文本',
                style: TextStyle(
                  decoration: TextDecoration.underline,
                  decorationStyle: TextDecorationStyle.dotted,
                ),
              ),

              // 文本溢出省略
              Container(
                width: 200,
                child: Text(
                  '这是一段很长的文本，超出容器宽度后会被截断显示省略号',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ),

              // 居中对齐
              Container(
                width: 300,
                child: Text(
                  '居中对齐的文本',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 18),
                ),
              ),

              // 带阴影的文本
              Text(
                '带阴影的文本',
                style: TextStyle(
                  fontSize: 28,
                  color: Colors.white,
                  shadows: [
                    Shadow(
                      color: Colors.black45,
                      offset: Offset(2, 2),
                      blurRadius: 4,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

const TextSpan({
  this.style,
  this.text,
  this.children,
  this.recognizer,
  this.semanticsLabel,
});

Text.rich(
  TextSpan(
    text: '你好，',
    style: TextStyle(fontSize: 20, color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          fontSize: 24,
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(
        text: '！这是一段',
        style: TextStyle(fontSize: 20),
      ),
      TextSpan(
        text: '富文本',
        style: TextStyle(
          fontSize: 22,
          color: Colors.red,
          decoration: TextDecoration.underline,
        ),
      ),
      TextSpan(text: '示例。'),
    ],
  ),
);

Text.rich(
  TextSpan(
    text: '请阅读并同意我们的',
    style: TextStyle(fontSize: 14),
    children: <TextSpan>[
      TextSpan(
        text: '服务条款',
        style: TextStyle(
          color: Colors.blue,
          decoration: TextDecoration.underline,
        ),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            print('点击了服务条款');
          },
      ),
      TextSpan(text: '和'),
      TextSpan(
        text: '隐私政策',
        style: TextStyle(
          color: Colors.blue,
          decoration: TextDecoration.underline,
        ),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            print('点击了隐私政策');
          },
      ),
    ],
  ),
);

const DefaultTextStyle({
  Key key,
  @required this.style,
  this.textAlign,
  this.softWrap,
  this.overflow,
  this.maxLines,
  this.textWidthBasis,
  this.textHeightBehavior,
  Widget child,
});

DefaultTextStyle(
  style: TextStyle(
    fontSize: 16,
    color: Colors.grey[600],
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      // 这个 Text 会继承 DefaultTextStyle 的样式
      Text('继承默认样式的文本'),

      // 这个 Text 用自己的样式覆盖默认样式
      Text(
        '自定义样式的文本',
        style: TextStyle(
          fontSize: 20,
          color: Colors.red,
          fontWeight: FontWeight.bold,
        ),
      ),

      // 这个 Text 也会继承默认样式
      // 但可以通过 inherit: false 完全使用自己的样式
      Text(
        '不继承默认样式的文本',
        style: TextStyle(
          inherit: false,
          fontSize: 14,
          color: Colors.green,
        ),
      ),
    ],
  ),
);

DefaultTextStyle.merge(
  style: TextStyle(color: Colors.red),
  child: Text('只修改颜色，其他继承'),
);