终于安装好了 Flutter 的环境，既然入了坑，就一点一点学吧，Flutter 可以说一切皆组件吧，所以要熟练掌握各个基础组件的 API，然后才能在面对复杂需求的时候才能得心应手的将各个组件组合起来，首先文本展示可以说是最基本的需求，所以先看看 Text 组件的使用。

1 构造方法

Text(String data, { Key key, TextStyle style, TextAlign textAlign, TextDirection textDirection, Locale locale, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines, String semanticsLabel })

该构造方法用于创建一个单一格式的 Text，其中第一个必传参数为文本内容。

Text.rich(TextSpan textSpan, { Key key, TextStyle style, TextAlign textAlign, TextDirection textDirection, Locale locale, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines, String semanticsLabel })

该构造方法用于创建一个富文本的 Text，其中第一个必传参数为 TextSpan，TextSpan 中可以设置 children 属性，包含多个 TextSpan，每个 TextSpan 可以设置各自的文本内容和样式，具体 API 参考下面 2.2 TextSpan。

2 常用属性

textAlign：文本对齐方式，可选值有如下五个：
   TextAlign.center: 文本居中对齐。
   TextAlign.left: 文本左对齐。
   TextAlign.right: 文本右对齐。
   TextAlign.start: 文本开始位置对齐，类似左对齐。
   TextAlign.end: 文本结束位置对齐，类似右对齐。

textDirection：文本方向，即文字从那边开始显示，该属性如果在 Text 前面加 new 关键字的话必须设置，可选值有如下两个：
TextDirection.ltr：left to right，文本从左边开始显示。
TextDirection.rtl：right to left，文本从左边开始显示，textAlign 为 TextAlign.start 时再设置该值，相当于又把 textAlign 设置为 TextAlign.end。textAlign 为 TextAlign.end 时再设置该值，相当于又把 textAlign 设置为 TextAlign.start。

maxLines：文本最多显示行数，值为 int 型。

overflow：当文本内容超过最大行数时，剩余内容的显示方式，相当于Android 的 ellipsize 属性，可选值有如下三个：
   TextOverflow.clip：直接切断，剩下的文字就没有了。
   TextOverflow.ellipsis：ellipsis:在后边显示省略号。
   TextOverflow.fade: 溢出的部分会进行一个渐变消失的效果，softWrap 属性为 false 时才会有效果。

softWrap：是否自动换行，值为 boolean 型：
true：文本内容超过一行后可以换行显示，当没有设置 maxLines 属性且 overflow 为 TextOverflow.ellipsis 失效，显示单行且文本超出的部分显示为省略号。
false：文本内容超过一行后不可以换行显示，即只能单行显示，超出的部分默认切断处理，如果设置了 overflow 属性则按照 overflow 属性值处理。当设置了 maxLines 属性且 overflow 为 TextOverflow.ellipsis 失效，即可以换行，最大行数为 maxLines 属性的值。

textScaleFactor：文本字体缩放倍数，值为 double 型。

locale：感觉是设置文本所属区域，可能跟字体有关，这个属性还没有看到效果。

semanticsLabel：感觉是为该 Text 组件设置标签，这个属性还没有看到效果。

style：设置文本样式，具体 API 参考下面 2.1 TextStyle。

2.1 TextStyle

该类用于设置 Text 的样式，可以通过该类设置文本字体大小、字体颜色、字体行间距等。

background：背景颜色，值为一个 Paint 对象，但是这样设置背景有些文本显示貌似会有点问题，所以不咋推荐。

color：文字颜色，值为一个 Color 对象。

debugLabel：感觉是为该 Style 设置标签，一段对人可读的对该 TextStyle 的描述。

decoration：添加装饰物，可选值有：
   TextDecoration.none：无，默认。
   TextDecoration.overline：上划线。
   TextDecoration.lineThrough：删除线。
   TextDecoration.underline：下划线。
   也可以调用 TextDecoration.combine() 方法传入一个集合设置多个装饰。

decorationColor：设置装饰物的颜色，值为一个 Color 对象。

decorationStyle：设置装饰物的样式，可选值有：
   TextDecorationStyle.dashed：装饰线为虚线。
   TextDecorationStyle.dotted ：装饰线为点构成的线。
   TextDecorationStyle.double ：装饰线为两根线。
   TextDecorationStyle.solid ：装饰线为实心线。
   TextDecorationStyle.wavy ：装饰线为波浪线。
   也可以 TextDecorationStyle.values() 方法传入一个集合设置多种样式。

fontFamily：自定义字体的名字，搭配 package 属性使用。

package：自定义字体的路径。

fontSize：字体大小，值为 double 类型。

fontStyle：字体样式，可选值有：
FontStyle.italic：斜体。
FontStyle.normal：正常。

fontWeight：字体字重，常用值有 FontWeight.bold（加粗）、FontWeight.normal（正常），此外还有 FontWeight.w100、FontWeight.w200...FontWeight.w900，其中 FontWeight.w900 相当于 FontWeight.bold。

inherit：貌似文档中的意思是是否使用父类的样式来替换空值（没有设置的值），如果为 true 则使用父类的样式来替换控制，如果为 false，则恢复成默认值，白色 10px，字体为 sans-serif。

letterSpacing：字间距，值为 double 类型。

locale：感觉是设置文字所属区域，可能跟字体有关，这个属性还没有看到效果。

shadows: 文字阴影，值为一个 Shadow 集合。

textBaseline：文本基线，这个不太理解，感觉用到的情况应该也不多，可选值有两个：
   TextBaseline.ideographic：用于对齐字母字符的字形底部的水平线。
   TextBaseline.alphabetic：用于对齐表意字符的水平线。
   也可以 TextBaseline.values() 方法传入一个集合设置多个基线。

wordSpacing：字体间距，值为 double 类型，应该是用空格隔开时就认为一个单词，英文容易理解，如 Hello World 就是两个单词，中文的词不用空格隔开，所以文本内容为中文时使用较少。

height：行高，值为 double 类型，最终是该属性的值乘以 fontSize 作为行高，所以该值更像是一个行高系数。

下面是一个用第一个构造方法创建的单一格式的 Text 组件，并设置了上述属性的 demo：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {Paint backgroundPaint = new Paint();backgroundPaint.color = new Color(0xFFFFFFFF);List<Shadow> shadowList = new List();shadowList.add(new Shadow(//阴影颜色color: new Color(0xFFFF0000),//模糊程度blurRadius: 2.0));return MaterialApp(//是否显示 debug 标签debugShowCheckedModeBanner: false,title: 'Text widget',home: Scaffold(appBar: new AppBar(title: new Text('Text widget'),),body: new Text(//单一格式文本框，第一个参数为文本内容"我是一段测试文本Hello World!我是一段测试文本 Hello World!我是一段测试文本 Hello World!我是一段测试文本 Hello World!我是一段测试文本 Hello World!",//文字对齐方式，可选值有如下五个：//TextAlign.center: 文本居中对齐//TextAlign.left: 文本左对齐//TextAlign.right: 文本右对齐//TextAlign.start: 文本开始位置对齐，类似左对齐//TextAlign.end: 文本结束位置对齐，类似右对齐//TextAlign.justify: 文本两端对齐textAlign: TextAlign.start,//文字方向，即文字从那边开始显示，该属性必须设置，可选值有如下两个：//TextDirection.ltr：left to right，文本从左边开始显示//TextDirection.rtl：right to left，文本从左边开始显示，textAlign 为 TextAlign.start 时再设置该值，相当于又把 textAlign 设置为 TextAlign.end。textAlign 为 TextAlign.end 时再设置该值，相当于又把 textAlign 设置为 TextAlign.starttextDirection: TextDirection.ltr,//文字最多显示行数，值为 int 型maxLines: 3,//当文本内容超过最大行数时，剩余内容的显示方式，相当于Android 的 ellipsize 属性，可选值有如下三个：//TextOverflow.clip：直接切断，剩下的文字就没有了//TextOverflow.ellipsis：ellipsis:在后边显示省略号//TextOverflow.fade: 溢出的部分会进行一个渐变消失的效果，softWrap 属性为 false 时才会有效果overflow: TextOverflow.ellipsis,//是否自动换行，值为 boolean 型：//true：文本内容超过一行后可以换行显示，//当没有设置 maxLines 属性且 overflow 为 TextOverflow.ellipsis 失效，显示单行且文本超出的部分显示为省略号。//false：文本内容超过一行后不可以换行显示，即只能单行显示，超出的部分默认切断处理，如果设置了 overflow 属性则按照 overflow 属性值处理。//当设置了 maxLines 属性且 overflow 为 TextOverflow.ellipsis 失效，即可以换行，最大行数为 maxLines 属性的值。
//      softWrap: false,//文本字体缩放倍数，值为 double 型
//      textScaleFactor: 1.2,//感觉是设置文本所属区域，可能跟字体有关，这个属性还没有看到效果。//locale//感觉是为该 Text 组件设置标签，这个属性还没有看到效果。//semanticsLabel//文本样式style: new TextStyle(
//        //背景颜色，但是这样设置背景有些文本显示貌似会有点问题，值为一个 Paint 对象
//        background: backgroundPaint,//文字颜色，值为一个 Color 对象color: new Color(0xFF000000),//感觉是为该 Style 设置标签，一段对人可读的对该 TextStyle 的描述//debugLabel//添加装饰物，可选值有：//TextDecoration.none：无，默认//TextDecoration.overline：上划线//TextDecoration.lineThrough：删除线//TextDecoration.underline：下划线//也可以调用 TextDecoration.combine() 方法传入一个集合设置多个装饰decoration: TextDecoration.underline,//设置装饰物的颜色，值为一个 Color 对象decorationColor: new Color(0xFF00FFFF),//设置装饰物的样式，可选值有：//TextDecorationStyle.dashed：装饰线为虚线//TextDecorationStyle.dotted ：装饰线为点构成的线//TextDecorationStyle.double ：装饰线为两根线//TextDecorationStyle.solid ：装饰线为实心线//TextDecorationStyle.wavy ：装饰线为波浪线//也可以 TextDecorationStyle.values() 方法传入一个集合设置多种样式decorationStyle: TextDecorationStyle.dashed,//自定义字体的名字，搭配 package 属性使用
//        fontFamily: ,//自定义字体的路径
//        package: ,//字体大小，值为 double 类型fontSize: 20.0,//字体样式，可选值有：//FontStyle.italic：斜体//FontStyle.normal：正常fontStyle: FontStyle.italic,//字体字重，常用值有 FontWeight.bold（加粗）fontWeight: FontWeight.bold,//貌似文档中的意思是是否使用父类的样式来替换空值（没有设置的值）//如果为 true 则使用父类的样式来替换控制//如果为 false，则恢复成默认值，白色 10px，字体为 sans-serifinherit: false,//字间距，值为 double 类型letterSpacing: 2.0,//感觉是设置文字所属区域，可能跟字体有关//locale//文字阴影，值为一个 Shadow 集合shadows: shadowList,//文本基线，这个不太理解，感觉用到的情况应该也不多，可选值有两个//TextBaseline.ideographic：用于对齐字母字符的字形底部的水平线//TextBaseline.alphabetic：用于对齐表意字符的水平线//也可以 TextBaseline.values() 方法传入一个集合设置多个基线textBaseline: TextBaseline.ideographic,//字体间距，值为 double 类型，应该是用空格隔开时就认为一个单词，英文容易理解，如 Hello World 就是两个单词，中文的词不用空格隔开，所以文本内容为中文时使用较少wordSpacing: 10.0,//行高，值为 double 类型，最终是该属性的值乘以 fontSize 作为行高，所以该值更像是一个行高系数height: 2.0),),),);}
}

运行效果如下：

2.2 TextSpan

TextSpan 用于设置某一段文字，它的属性不多，用法也很简单。

text：文本内容。

style：文字样式，如果后面的 TextSpan 没有覆盖该 TextStyle 中的属性，则使用该 TextStyle 指定的样式。

recognizer：应该是手势识别监听器，后面用到手势监听再详细学习该类用法。

children：子 TextSpan，可以指定多个。

下面是一个用第二个构造方法创建的富文本的 Text 组件，并设置了上述属性的 demo：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {Paint backgroundPaint = new Paint();backgroundPaint.color = new Color(0xFFFFFFFF);List<Shadow> shadowList = new List();shadowList.add(new Shadow(//阴影颜色color: new Color(0xFFFF0000),//模糊程度blurRadius: 2.0));return MaterialApp(//是否显示 debug 标签debugShowCheckedModeBanner: false,title: 'Text widget',home: Scaffold(appBar: new AppBar(title: new Text('Text widget'),),body: new Text.rich(//富文本文本框构造方法，可以显示多种样式的text，第一个参数为 TextSpannew TextSpan(text: "我是一段测试文本",//文字样式，如果后面的子 TextSpan 没有覆盖该 TextStyle 中的属性，则使用该 TextStyle 指定的样式style: new TextStyle(//文字颜色，整体的文字颜色，如果后面的子 TextSpan 没有覆盖该属性，则使用该文字颜色color: new Color(0xFF000000),//同上fontSize: 20.0,//同上decoration: TextDecoration.underline),//应该是手势识别监听器，后面用到手势监听再详细学习该类用法
//          recognizer: ,//子 TextSpan，可以指定多个children: <TextSpan>[new TextSpan(text: "Hello",style: new TextStyle(color: new Color(0xFFFF0000),fontSize: 30.0,fontStyle: FontStyle.italic)),new TextSpan(text: "World",style: new TextStyle(color: new Color(0xFFFFFF00),fontSize: 40.0,fontWeight: FontWeight.bold)),]),textDirection: TextDirection.ltr,),),);}
}

运行效果如下：

3 总结

可以看到 Flutter 写出来的 App 还自带有沉浸式的效果，还是蛮不错的。它的开发方式跟 Android 又完全不同，Android 中的控件大部分都是在 xml 布局中写的，Flutter 则是在代码中写，没有可视化的布局这点还是挺不习惯的。不过 Dart 语言写起来也还算顺手，只能说努力学吧。

Flutter 基础组件之 Text相关推荐

一份超级详细的Flutter基础组件练习示例，请查收！
学习B站技术胖的flutter基础课程整理的示例,为了平时方便查阅,同时希望能和大家一同进步~ Flutter基础组件 Hello world import 'package:flutter/mate ...
【Flutter -- 基础组件】Flutter 导航栏
文章目录 1. TabBar 1.1 代码 1.2 效果图 2. BottomNavigationBar 2.1 构建底部标签 2.2 创建导航栏 2.3 效果图 1. TabBar Flutter ...
Flutter 基础组件之 Container
官方简介中,说 Container 组件是一个方便绘制.定位和调整子组件大小的组件. 首先 Container 会在 child 子组件周围填充 padding(包括 decoration 中存在的 ...
Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见学习Dart 基础知识移步这里安装flutter环境相关移步这里 flutter基础组件使用相关移步这里文章目录一 ...
flutter 基础知识点总结
前提:从事开发已经十年了,PC开发/Android开发/后端开发,初级/中级/高级/架构师,成员/组长/开发负责人,以及各种考证和阶段目标计划-,一路走来喜怒哀乐/酸甜苦辣都体验了. 人无远虑必有近忧 ...
Flutter基础布局组件及实现
https://www.cnblogs.com/lxlx1798/p/11084904.html 一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Paddi ...
Flutter(四)——基础组件
本文目录前言基础组件 Text 常用属性使用 Icon Image Button FlutterLogo 前言你如果做过Android开发,那一定熟悉里面各种官方提供的布局,比如LinearLa ...
第 1-8 课：基础组件详解（Text、Image、Button）
前面已经讲解了大量的 Flutter 相关基础知识,从这节课开始,我们将进行 Flutter 的系列 Widget.布局的学习.那么这节课就带领大家对 Flutter 的基础 Widget 中的几个典 ...
Flutter文本组件Text
Flutter 文本组件Text 在android中,一个页面,一般是用 Activity 或者是一个Fragement 来加载显示出来的,而其中的一个View 或者一个布局文件(layout.x ...

Flutter 基础组件之 Text