Flutter Text in practice

本文记录Text的常用打开方式，以作备忘。

• Demo地址 gitee.com
• 官方文档 api.flutter.dev

默认

Text('你好，广州');

改变文字颜色

Text('红色文字', style: TextStyle(color: Colors.red))

改变背景色

Text('粉色背景', style: TextStyle(backgroundColor: Colors.pink))

改变字体大小

Text('字体size:18', style: TextStyle(fontSize: 18))

加粗

Text('加粗',style: TextStyle(fontWeight: FontWeight.bold))

斜体

Text('斜体', style: TextStyle(fontStyle: FontStyle.italic))

字体

Text("字体", style: TextStyle(fontFamily: 'Courier'))

换行行为

Text('是否换行, 默认为true, 设置false会只显示一行abcdefghijklkjlkjlkjlkj',
    softWrap: false),

// 不换行，尾部添加...
Text(
  'overflow: TextOverflow.ellipsis: 超出一行最大宽度时长度显示...超出一行最大宽度时长度显示...超出一行最大宽度时长度显示...,overflow: TextOverflow.ellipsis',
  softWrap: false,
  overflow: TextOverflow.ellipsis,
)

// 不换行并截断文字
Text(
  'overflow: TextOverflow.clip: 超出一行最大宽度时长度截断超出超出一行最大宽度时长度截断超出超出一行最大宽度时长度截断超出超出一行最大宽度时长度截断超出',
  softWrap: false,
  overflow: TextOverflow.clip,
)

// 不换行，尾部有个渐变的隐藏
Text(
  'overflow: TextOverflow.fade: 超出一行最大宽度时长度时尾部出现隐藏渐变色超出一行最大宽度时长度时尾部出现隐藏渐变色超出一行最大宽度时长度时尾部出现隐藏渐变色',
  softWrap: false,
  overflow: TextOverflow.fade,
)

// 出屏了都继续渲染，感觉没啥存在的必要
Text(
  'overflow: TextOverflow.visible: 在容器外渲染文本内容,不推荐Render overflowing text outside of its container',
  softWrap: false,
  overflow: TextOverflow.visible,
)

划线

Text('文字顶部横线', style: TextStyle(decoration: TextDecoration.overline)),

Text('文字中间横线', style: TextStyle(decoration: TextDecoration.lineThrough)),

Text('文字底部横线', style: TextStyle(decoration: TextDecoration.underline)),

Text('文字顶部底部横线',
    style: TextStyle(
        decoration: TextDecoration.combine(
            [TextDecoration.overline, TextDecoration.underline]))),

Text('双横线',
    style: TextStyle(
        decorationColor: Colors.blue, // 设置横线颜色
        decorationStyle: TextDecorationStyle.double,
        decoration: TextDecoration.underline)),

Text('虚线',
    style: TextStyle(
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.dashed,
        decoration: TextDecoration.underline)),

// 与虚线的区别是虚线是断线
Text('点连成线',
    style: TextStyle(
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.dotted,
        decoration: TextDecoration.underline)),

// 默认样式
Text('实线',
    style: TextStyle(
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.solid,
        decoration: TextDecoration.underline)),

Text('波浪线',
    style: TextStyle(
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.wavy,
        decoration: TextDecoration.underline)),

Text('横线颜色为红色',
    style: TextStyle(
        decorationColor: Colors.red,
        decorationStyle: TextDecorationStyle.wavy,
        decoration: TextDecoration.underline)),

Text('设置横线粗细',
    style: TextStyle(
        decorationThickness: 4,
        decorationColor: Colors.red,
        decorationStyle: TextDecorationStyle.solid,
        decoration: TextDecoration.underline)),

居中、居左、居右、两侧对齐

Text('文字居左', textAlign: TextAlign.left),
Text('文字居中', textAlign: TextAlign.center),
Text('文字居右', textAlign: TextAlign.right),
Text('文字向两侧对齐:', textAlign: TextAlign.justify),

// 使用start和end配合文字方向来显示比如阿拉伯文从右向左的文字。
Text('TextDirection.ltr + TextAlign.start',
    textAlign: TextAlign.start, textDirection: TextDirection.ltr),
Text('TextDirection.rtl + TextAlign.start',
    textAlign: TextAlign.start, textDirection: TextDirection.rtl),
Text('TextDirection.ltr + TextAlign.end',
    textAlign: TextAlign.end, textDirection: TextDirection.ltr),
Text('TextDirection.rtl + TextAlign.end',
    textAlign: TextAlign.end, textDirection: TextDirection.rtl),

行高

Text('''
设置行高, 单位: 倍
第一部分
1111
22
第二部分
333
44
第三部分
''', style: TextStyle(height: 3))

文字描边

import 'dart:ui' as ui;

Text("描边",
    style: TextStyle(
        fontSize: 30,
        foreground: Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1
          ..color = Colors.blue))

文字渐变色

import 'dart:ui' as ui;

Text("渐变色: foreground: Paint()..shader = ui.Gradient.linear",
    style: TextStyle(
        fontSize: 30,
        foreground: Paint()
          ..shader = ui.Gradient.linear(const Offset(0, 20),
              const Offset(150, 20), [Colors.red, Colors.yellow]))),

阴影

Text("文字添加阴影",
    style: TextStyle(shadows: [
      Shadow(
        offset: Offset(10.0, 10.0),
        blurRadius: 3.0,
        color: Color.fromARGB(255, 0, 0, 0),
      ),
      Shadow(
        offset: Offset(10.0, 10.0),
        blurRadius: 8.0,
        color: Color.fromARGB(125, 0, 0, 255),
      )
    ])),

间距

Text('字母间距', style: TextStyle(letterSpacing: 3)),
Text('单词间距', style: TextStyle(wordSpacing: 35)),

调整文字像素倍率

Text('textScaleFactor: 字体像素 = textScaleFactor * 逻辑像素.',
    textScaleFactor: 1.5)

控制行数

Text('最多三行:\nline1\nline2\nline3\nline4', maxLines: 3),

富文本

Text.rich(TextSpan(
    text: 'Hello',
    style: TextStyle(color: Colors.red),
    children: [
      TextSpan(
        text: 'wor',
        style: TextStyle(color: Colors.green),
      ),
      TextSpan(
        text: 'ld!',
        style: TextStyle(color: Colors.blue),
      )
    ]))