1.属性
const Text(
String data, {
Key key,
TextStyle style,
TextAlign textAlign,
TextDirection textDirection,
Locale locale,
bool softWrap,
TextOverflow overflow,
double textScaleFactor,
int maxLines,
String semanticsLabel
})
1.TextAlign: 文本的对齐方式;可以选择左对齐、右对齐还是居中。注意,对齐的参考系是Text widget本身。本例中虽然是指定了居中对齐,但因为Text文本内容宽度不足一行,Text的宽度和文本内容长度相等,那么这时指定对齐方式是没有意义的,只有Text宽度大于文本内容长度时指定此属性才有意义
2.maxLines 最多行数
3.textScaleFactor 相对当前字体的缩放因子相对于style的fontSize
4.overflow 文字的溢出方式
--clip:超出部分裁减掉,默认值
--fade:在尾部蒙上一层阴影
--ellipsis:在尾部显示...
5.softWrap 文本是否应该在换行符处断行
6.textDirection 文本显示的方向
7.locale 用于在相同Unicode字符可以根据区域设置不同时选择字体
8.semanticsLabel 该文本的另一种语义标签
9.style 样式
-- color:字体颜色
-- fontSize:字体大小
-- fontWeight:字体的粗细
-- fontStyle:正常还是斜体
-- letterSpacing:每个字符之间的间距,可设置负数,负数使字体之间更紧凑
-- wordSpacing:单个空格的宽度,如果你两个字符之间间隔5个空格,则这两个字符之间的距离就是5 * wordSpacing。可设置负数,负数使字体之间更紧凑
-- textBaseline:文本对齐方式 TextBaseline枚举值
-- height:文本高度的倍数,height * 文本高度 = Text的高度,文本垂直绘制起点向下偏移
-- locale:本地化,指定当前文本采用什么语言
-- foreground:字体的前景色,覆盖在字体上面
-- background:字体的背景色
-- shadows:文字阴影(相当于文字的影子)
-- decoration:绘制下划线、上划线、删除线
-- decorationColor:线的颜色
-- decorationStyle:线的样式,实线、两条线,点线,短线条间隔、波浪线
-- fontFamily:字体库
-- package:当使用的字体库是其它包中内容时,指定字体库所在的包名称
2. 例子
Text("Hello world "*6, //字符串重复六次
textAlign: TextAlign.center,
);
Text("Hello world! I'm Jack. "*4,
maxLines: 1,
overflow: TextOverflow.ellipsis,
);
Text("Hello world",
style: TextStyle(
color: Colors.blue,
fontSize: 18.0,
height: 1.2,
fontFamily: "Courier",
background: Colors.yellow,
decoration:TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed
),
);
3. TextRich和TextSpan
如果我们需要对一个Text内容的不同部分按照不同的样式显示,这时就可以使用TextSpan
const TextSpan({
TextStyle style,
Sting text,
List<TextSpan> children,
GestureRecognizer recognizer,
});
其中style 和 text属性代表该文本片段的样式和内容。 children是一个TextSpan的数组,也就是说TextSpan可以包括其他TextSpan。而recognizer用于对该文本片段上用于手势进行识别处理。
Text.rich(TextSpan(
children: [
TextSpan(
text: "Home: "
),
TextSpan(
text: "https://flutterchina.club",
style: TextStyle(
color: Colors.blue
),
recognizer: _tapRecognizer
),
]
))
上面代码中,我们通过TextSpan实现了一个基础文本片段和一个链接片段,然后通过Text.rich 方法将TextSpan 添加到Text中,之所以可以这样做,是因为Text其实就是RichText的一个包装,而RichText是可以显示多种样式(富文本)的widget
3. DefaultTextStyle
在widget树中,文本的样式默认是可以被继承的,因此,如果在widget树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式,而DefaultTextStyle正是用于设置默认文本样式的
DefaultTextStyle(
//1.设置文本默认样式
style: TextStyle(
color:Colors.red,
fontSize: 20.0,
),
textAlign: TextAlign.start,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("hello world"),
Text("I am Jack"),
Text("I am Jack",
style: TextStyle(
inherit: false, //2.不继承默认样式
color: Colors.grey
),
),
],
),
);