• Flutter 学习笔记 源码地址
• Flutter 学习笔记(零) 搭建 Flutter 环境
• Flutter 学习笔记(一) Text 组件
• Flutter 学习笔记(二) Container 组件

1. Text 组件简介

Text 组件显示单个样式的文本字符串。字符串可能会跨越多行，也可能全部显示在同一行上，具体取决于布局约束。

2. Text 属性

2.1 data 属性

该 Text 要显示的文本。值为一串字符串。

2.2 textAlign 属性

文本的对齐方式。可选值有：

• TextAlign.start

• TextAlign.end、

  这两个值与文本对齐的方向有关，如果方向是从左向右的，那么start就是左对齐，end就是右对齐。反之亦然

• TextAlign.left

• TextAlign.right

  这两个值跟文本方向无关，left 是左对齐，right是右对齐

• TextAlign.center

  文本居中

• TextAlign.justify

  文本两端对齐

PS： 对齐方式可以参考 word 里的对齐方式

2.3 textDirection

该文本的对齐方向。

• TextDirection.ltr

  如果 textAlign 的属性是 start 则左对齐，end 是右对齐

• TextDirection.rtl

  如果 textAlign 的属性是 start 则右对齐，end 是左对齐

2.4 maxLines

最大行。最多显示的行数

2.5 overflow

处理溢出的文本方式

• TextOverflow.ellipsis

  以 … 显示。 例如： xxx…

• TextOverflow.clip

  直接剪切溢出的文本

• TextOverflow.fade

  将溢出的文本淡化为透明

2.6 textScaleFactor

每个逻辑像素的字体像素数

3 Text Style

Text 组件的样式

3.1 background

设置 Text 的背景。值是一个 Paint 对象。可以设置 Paint 对象的 color属性来设置 Text 的背景色

3.2 color

设置字体颜色

3.3 decoration

设置文本装饰，上划线、下划线、中划线等。

3.4 decorationColor

上划线、下划线、中划线等线条的颜色

3.5 decorationStyle

文本装饰的样式。虚线、短横线、波浪线等

• TextDecorationStyle.dashed

  画一条虚线。例如 ————–

• TextDecorationStyle.dotted

  画一条带点的虚线 例如 …………

• TextDecorationStyle.solid

  画一条实线。例如 _______________

• TextDecorationStyle.double

  画两条实线。

• TextDecorationStyle.wavy

  画两条波浪线

3.6 fontSize

字体大小

3.7 fontStyle

字体样式。斜体和标准样式

• FontStyle.italic

  斜体

• FontStyle.normal

  标准字体

3.8 fontWeight

字体粗细

• FontWeight.w100 - w900

  FontWeight.w100 最细 FontWeight.w900 最粗

3.9 foreground

Text 前景色，即字体颜色。值为一个 Paint 对象，类似于 background 属性

PS：这个属性与 color冲突，二者不能共存，必须有一个值为 null。

3.10 height

类似于 word 里的行间距。这个值是 行高的倍数。
如果 值是 1.5 则行间距是 1.5 倍的行高

3.11 letterSpacing

字母与字母之间的间距。单位是逻辑像素。 
例如 h  e   l   l   o

3.12 wordSpacing

单词与单词之间的间距。单位是逻辑像素
例如 hello      world

4 shadows

文字阴影。
PS：这个值的属性是 List<Shadow>。也就是说可以退添加多个阴影

4.1 color

阴影颜色

4.2 offset

阴影在 x轴和y轴的偏移量

4.3 blurRadius

阴影模糊度

5 TextDemo 源码

import 'package:flutter/material.dart';

void main() => runApp(TextDemo());
class TextDemo extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    var background = Paint();
    background.color = Color.fromARGB(111, 255, 1, 1);
    var foreground = Paint();
    foreground.color =  Color.fromARGB(255, 1, 122, 11);

    var shadowsList = List<Shadow>();
    shadowsList.add(Shadow(
      color: Color.fromARGB(111, 255, 1, 1),
      offset: Offset(1, 20),
      blurRadius:1));
    shadowsList.add(Shadow(
      color: Color.fromARGB(255, 1, 122, 11),
      offset: Offset(20, 1),
      blurRadius:10));

    return MaterialApp(
      title: 'Text Demo',
      home: Scaffold(
        body: Center(
          child: Text(
            'hello ,text,好好学习,天天向上!好好学习,天天向上!好好学习,天天向上!好好学习,天天向上!好好学习,天天向上',
            textAlign: TextAlign.start,
            textDirection: TextDirection.rtl,
            maxLines: 2,
            overflow: TextOverflow.fade ,
            //textScaleFactor: 1,
            style: TextStyle(
              //background: background,
              //color: Color.fromARGB(255, 1, 122, 11),
              decoration: TextDecoration.underline,
              decorationColor: Color.fromRGBO(255, 1, 1, 11),
              decorationStyle: TextDecorationStyle.wavy ,
              fontSize: 44,
              fontStyle: FontStyle.normal,
              fontWeight: FontWeight.w900,
              //与color 值冲突
              foreground: foreground,
              height: 1.5,
              letterSpacing: 11,
              //shadows: shadowsList,
              wordSpacing: 122
              ),
              ),
              
        ),
      ),
    );
  }

}