1. 基本介绍

Text 组件非常常用，用来显示文本。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. Text 组件

3.1 Text 属性介绍

Text 属性	介绍
style	TextStyle 对象，最常用属性，详情见下方表格
strutStyle	字体在文本内的一些偏移，使用时 style 属性必须有值，很少使用
textAlign	对齐方式：left、start、right、end、center、justify
textDirection	TextDirection.ltr:从左到右、TextDirection.rtl：从右到左
locale	区域设置，基本不会用
softWrap	是否自动换行
overflow	超出部分截取方式，clip->直接截取，fade->渐隐，ellipsis->省略号
textScaleFactor	字体缩放
maxLines	最多显示行数
semanticsLabel	语义标签，如文本为"$$"，这里设置为"双美元"
textWidthBasis	测量行宽度
textHeightBehavior	官方备注: 定义如何应用第一行的ascent和最后一行的descent

3.2 TextStyle 属性介绍

TextStyle 属性	介绍
inherit	是否继承父类
color	字体颜色
backgroundColor	背景色
fontSize	字体大小
fontWeight	字体加粗
fontStyle	系统字体
fontFamily	字体
letterSpacing	字母间距
wordSpacing	单词间距
textBaseline	字体基线，有兴趣的可以单独了解，flex 布局中会有一种baseline，不常用
height	高度
locale	区域设置
foreground	前置层
background	背景层
shadows	阴影
fontFeatures	指定字体的多种变体
decoration	文字划线：上，中，下
decorationColor	划线颜色
decorationStyle	划线样式：虚线，单线，双线
decorationThickness	线宽，默认1.0
debugLabel	仅在 debug 模式下有用

3.3 容器创建

import 'package:flutter/material.dart';

class FMTextVC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            "Row",
          ),
          backgroundColor: Colors.lightBlue,
        ),
        body: Container(
          child: _listView(),
        ),
      ),
    );
  }

  ListView _listView(){
    return ListView(
      children: [
        _normalText(),
      ],
    );
  }

  Text _normalText(){
    return Text("Hello World");
  }
}

3.3.1 基础属性

3.3.1.1 TextAlign

  Text _normalText(){
    return Text(
      "Hello World",
      textAlign: TextAlign.left,
    );
  }

分别尝试 TextAlign 的 left, right, center, justify, start, end 等属性

align left.png

align right.png

algin center.png

align justify.png

align start.png

align end.png

3.3.1.2 TextDirection

TextDirection.ltr
TextDirection.rtl
一共两条属性，这里单独使用看不出什么效果。

3.3.1.3 softWrap, overflow, maxLines

  Text _normalText(){
    return Text(
      "Hello World Hello World  Hello World  Hello World  Hello World  Hello World HellHellHellHellHellHellHe HellHellHellHellHellHeo11112",
      textDirection: TextDirection.ltr,
      softWrap: true,
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
    );
  }

text wrap.png

注意：此处是以单词为分隔的，最后一个单词无法显示时会展示...

3.3.2 TextStyle

这个属性是最为常用的。

3.3.2.1 字体大小，颜色

  Text _normalText(){
    return Text(
      "Hello World",
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
      softWrap: true,
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
        fontSize: 50,
        color: Colors.red,
      ),
    );
  }

text font color.png

3.3.2.2 下划线

  Text _normalText(){
    return Text(
      "Hello World",
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
      softWrap: true,
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
        fontSize: 50,
        color: Colors.red,
        decoration: TextDecoration.underline,
        decorationColor: Colors.yellow,
        decorationStyle: TextDecorationStyle.double,
      ),
    );
  }

text underline.png

3.4 富文本

import 'package:flutter/gestures.dart';

  ListView _listView(){
    return ListView(
      children: [
        _normalText(),
        _richText(),
      ],
    );
  }

  Text _richText(){
    return Text.rich(
      TextSpan(
        text: "Just ",
        style: TextStyle(
          fontSize: 30,
        ),
        children: [
          TextSpan(
            text: "taps here",
            style: TextStyle(
              fontSize: 40,
              color: Colors.blue
            ),
            recognizer: TapGestureRecognizer()
              ..onTap = (){
                print("点击了");
              }
            ,
          ),
          TextSpan(
            text: " one more time",
          ),
        ],
      ),
    );
  }

点击事件如下图打印。

text rich.png

4. 技术小结

其实 Text 组件还有很多属性没有一一列出，但是字体颜色，富文本，是最常用功能，其他的有需要可以另行学习研究。

Flutter入门（10）：Flutter 组件之 Text 详解