1.Text
Common attributes:
textAlign : text alignment, it is noted that the reference frame alignment Text widget itself, has five possible values:
TextAlign.center: centers the text.
TextAlign.left: left-aligned text.
TextAlign.right: right-aligned text.
TextAlign.start: text alignment starting position, similar to the left-aligned.
TextAlign.end: text aligned end position, similar to the right-aligned.
textDirection : text direction, text that is displayed from the side, if the property is added to the new keyword, then front Text must be set, the following two optional values:
TextDirection.ltr: left to right, the text displayed from the left.
TextDirection.rtl: right to left, the text is displayed from the left, and then set the value to textAlign TextAlign.start, the equivalent again textAlign to TextAlign.end. textAlign then the value is set when TextAlign.end corresponds again textAlign to TextAlign.start.
maxLines : Specifies the maximum number of lines of text display, is int. By default, the text is automatically wrapped, if this parameter is specified, the text does not exceed a maximum specified line. If there is extra text, you can specify truncation by overflow, the default is a direct cut
overflow : when the text exceeds the maximum number of rows, the remaining contents of the display, corresponding to the Android ellipsize property, the following three possible values:
TextOverflow.clip: direct cutting, there is no rest of the text.
TextOverflow.ellipsis: ellipsis: ellipsis in the back.
TextOverflow.fade: overflow will be part of a gradual disappearance of the effect, softWrap property is false if there will be results.
softWrap : whether to automatically wrap, a boolean value:
to true: text line can wrap over the display, and if no overflow is provided maxLines property TextOverflow.ellipsis failure, and displays a single line of text exceeds the partial display ellipses.
false: the text may not wrap over line display, i.e., only single-line display, cutting the excess part of the default processing, if the property is set in accordance with the overflow overflow property value processing. When property set up and overflow is TextOverflow.ellipsis maxLines failure, which can wrap, the maximum number of rows is the value maxLines property.
textScaleFactor : Text font scaling factor, the value of double type.
locale : the feeling is to set the text belongs to the region, the font may be associated with this property have not seen the effect.
semanticsLabel : Text component sense is for the Settings tab, the properties have yet to see results.
style : setting text style, specific reference to the following API 2.1 TextStyle.
2.TextStyle
This class is used to set the style Text may be provided by such text font size, font color, font line spacing.
Common attributes:
background : the background color, is a Paint object, but this sets the background and some text will display looks like a bit of a problem, so I do not gnaw recommended.
Color : the color of the text, is a Color object.
debugLabel : feeling is provided for the tab Style, some human readable description of the TextStyle.
Decoration : add decorations, possible values are:
TextDecoration.none: no default.
TextDecoration.overline: on the dash.
TextDecoration.lineThrough: strikethrough.
TextDecoration.underline: Underline.
You can also call TextDecoration.combine () method passing in a collection of settings more decorative.
decorationColor : set the color of the ornament, is a Color object.
decorationStyle : Styles, optional value are set garnish:
TextDecorationStyle.dashed: decorative thread as a dotted line.
TextDecorationStyle.dotted: decorative lines of dots of the line.
TextDecorationStyle.double: Decorative line two lines.
TextDecorationStyle.solid: Decorative line solid line.
TextDecorationStyle.wavy: Decorative lines wavy lines.
Can TextDecorationStyle.values () method passing in a collection of settings a variety of styles.
fontFamily : custom font name, with the package properties to use.
Package Penalty for : custom font path.
the fontSize : font size, type double value.
fontStyle : font style, optional values are:
FontStyle.ITALIC: italics.
FontStyle.normal: normal.
fontWeight : character font weight values are used FontWeight.BOLD (bold), FontWeight.NORMAL (normal), in addition FontWeight.w100, FontWeight.w200 ... FontWeight.w900, wherein FontWeight.w900 equivalent FontWeight.bold.
the inherit : seemingly document means whether style parent to replace the null value (not set value), if true then replace control using the style parent class, if false, then reset to the default value, white 10px , font sans-serif.
letterSpacing : word spacing, is double.
locale : the feeling is to set the text belongs to the region, the font may be associated with this property have not seen the effect.
Shadows : text shadow, is a collection of Shadow.
textBaseline : text baseline, do not understand this situation should not be used in a multi-sensory, there are two possible values:
TextBaseline.ideographic: horizontal alignment for the bottom of the font alphabet characters.
TextBaseline.alphabetic: for horizontal alignment of ideographic characters.
May TextBaseline.values () method passing a set of a plurality of baseline.
wordSpacing : font spacing, the value of double type, should be separated by a space when you think of a word, easy to understand English, such as Hello World is two words, Chinese words not separated by a space, so the text content when compared to Chinese less.
height : line height, double type value, the final value of this attribute is multiplied by a row fontSize high, the value is more like a high coefficient row.
The following is a Text component with a first constructor to create a single format and sets the attribute of the 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<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.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,
//文字颜色，值为一个 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-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),
),
),
);
}
}
3.TextSpan
TextSpan for setting a piece of text, attributes much of its usage is also very simple.
text : text content.
style : text style, if the latter is not TextSpan TextStyle attributes of the covering, then the style specified TextStyle use.
Recognizer : gesture recognition should be the listener, behind the gestures used to listen to learn details of such usage.
Children : son TextSpan, you can specify more.
The following is a rich text with the second constructor created Text component, and set the attribute of the 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<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，第一个参数为 TextSpan
new 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,
),
),
);
}
}
