安装好flutter环境后,就可以开始flutter的正式学习,flutter中可以说是一切皆组件,所以在学习的过程中就要熟练的掌握各各组件中的关系和使用的方法.
1.Text的构造方法
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('TextString',textAlign: TextAlign.center,maxLines: 1,overflow: TextOverflow.fade,
style: TextStyle(fontSize: 25, color: Colors.cyan,), ),
2.Text的常用的属性
①.
textAlign:表示对齐模式,一共有5种的对齐方式.
TextAlign.left: 文本左对齐.
TextAlign.right: 文本右对齐.
TextAlign.start: 文本开始位置对齐，类似左对齐.
TextAlign.end: 文本结束位置对齐，类似右对齐.
一般来说我们只使用前三种对齐.
例如:Text('exampleText',textAlign: TextAlign.center,),
②.
textDirection:表示文字的方向,即文字从哪边开始显示,该属性如果在Text前面加new关键字的话必须设置, 可选值有如下两种.
TextDirection.ltr：left to right，文本从左边开始显示.
TextDirection.rtl：right to left，文本从右边开始显示.
例如:Text('exampleText',textDirection: TextDirection.rtl,),
③.
maxLines和overflow:maxLines表示最大的显示的行数,值为 int 型.overflow表示当文本内容超过最 大行数时,剩余内容的显示方式,可选值有三个:
TextOverflow.clip：直接切断，剩下的文字就没有了.
TextOverflow.ellipsis：在后边显示省略号.
TextOverflow.fade: 溢出的部分会进行一个渐变消失的效果，softWrap属性为false时才会有效果.
例如:Text('exampleText',maxLines: 1,overflow:TextOverflow.ellipsis,),
④.
softWrap：是否自动换行，值为 boolean 型：
true：文本内容超过一行后可以换行显示，当没有设置maxLines属性且overflow为TextOverflow.ellipsis失效，显示单行且文本超出的部分显示为省略号.
false：文本内容超过一行后不可以换行显示，即只能单行显示，超出的部分默认切断处理，如果设置了overflow属性则按照overflow属性值处理。当设置了maxLines属性且overflow为TextOverflow.ellipsis失效，即可以换行，最大行数为maxLines属性的值.
例如:Text('exampleText', softWrap: ture,),
⑤.
textScaleFactor:文本字体缩放倍数，值为double型.
⑥.locale:设置文本所属区域，可能跟字体有关，这个属性还没有使用到.
⑦.semanticsLabel: Text 组件设置标签,这个属性还没有使用到.
⑧.style:设置文字的样式,接下来2.1我们会继续介绍.
2.1 TextStyle
textStyle是用来设置Text的样式的,可以通过textStyle设置文字的字体大小、字体颜色、文字样式等等.
①.
background:背景颜色，值为一个 Paint 对象,backgroundColor 和 background 不能同时设置.
例如:Text('exampleText',style: TextStyle( background: Paint(),),),
②.
backgroundColor: 背景颜色.
③.color:文字的颜色,值为一个 Color 对象.
例如:Text('exampleText',style: TextStyle( color: Colors.cyan,),),
④.
foreground:通过 Paint 来设置字体的颜色，color 和 foreground 不能同时设置.
⑤.
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()方法传入一个集合设置多种样式.
⑧.
decorationThickness: 划线粗细的宽度.
⑨.fontFamily:自定义字体的名字，搭配package属性使用.
例如:Text('exampleText',style: TextStyle( color: Colors.cyan,
fontFamily:"DIN_Medium.ttf", package:"assets/fonts",),),
⑩.
package:自定义字体的路径.
例如:Text('exampleText',style: TextStyle( color: Colors.cyan,
fontFamily:"DIN_Medium.ttf", package:"assets/fonts",),),
⑪.
fontFamilyFallback:文字字体列表，如果前面的 fontFamily 提供了，以fontFamily 为准，如果没有提供，则使用该列表第一个元素作为字体，都没提供则使用默认字体.
⑫.fontSize:字体大小，值为double类型.
⑬.
fontStyle:字体样式，可选值有：
FontStyle.italic：斜体.
FontStyle.normal：正常.
⑭.
fontWeight:字体字重，常用值有FontWeight.bold（加粗）、FontWeight.normal（正常），此外还有FontWeight.w100、FontWeight.w200...FontWeight.w900，其中FontWeight.w900相当于FontWeight.bold.
⑮.
inherit:未设置属性是否继承父节点样式,具体怎么使用还没有遇到过.
⑯.
letterSpacing:字间距，值为 double 类型.
⑰.
locale:多国语言设置.
例如:Text('exampleText',style: TextStyle( color: Colors.cyan,
locale:const Locale('en', 'US'),),),
⑱.
shadows:文字阴影，值为一个 Shadow 集合.
例如:Text('exampleText',style: TextStyle( color: Colors.cyan,
shadows:[BoxShadow(color: Colors.grey, offset: Offset(-1, -1), blurRadius: 5)],),),
⑲.
textBaseline:文本基线,可选值有两个：
TextBaseline.ideographic：用于对齐字母字符的字形底部的水平线.
TextBaseline.alphabetic：用于对齐表意字符的水平线.
也可以 TextBaseline.values() 方法传入一个集合设置多个基线.
⑳.
wordSpacing:字体间距，值为double类型.
㉑.
height:行高，值为 double 类型.
㉒.
debugLabel:为该 Style 设置标签，在debug模式可读的对该 TextStyle 的描述.
下面是一个用第一个构造方法创建的单一格式的 Text 组件，并设置了上述属性的 demo：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Paint backgroundPaint = new Paint();
backgroundPaint.color = new Color(0xFFFFFFFF);
List 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.start
textDirection: 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,
// backgroundColor 和 background 不能同时设置.
// backgroundColor:Colors.cyan
// 文字颜色，值为一个 Color 对象
color: new Color(0xFF000000),
// 通过 Paint 来设置字体的颜色，color 和 foreground 不能同时设置
// foreground:backgroundPaint,
//感觉是为该 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,
// 划线粗细的宽度.
decorationThickness: 2.0,
//自定义字体的名字，搭配 package 属性使用
// fontFamily: ,
//自定义字体的路径
// package: ,
//字体大小，值为 double 类型
fontSize: 20.0,
//字体样式，可选值有：
//FontStyle.italic：斜体
//FontStyle.normal：正常
fontStyle: FontStyle.italic,
//字体字重，常用值有 FontWeight.bold（加粗）
fontWeight: FontWeight.bold,
//貌似文档中的意思是是否使用父类的样式来替换空值（没有设置的值）
//如果为 true 则使用父类的样式来替换控制
//如果为 false，则恢复成默认值，白色 10px，字体为 sans-serif
inherit: 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),
),
),
);
}
}
想了解更多Flutter学习知识请联系:QQ(814299221)