1.Text
用于显示单个样式的文本控件，字符串可以显示一行或者多行，具体取决于布局约束。
text的属性值：
const Text(this.data, {
Key key,
this.style,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,//图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
}) : assert(data != null),
textSpan = null,
super(key: key);
| style | 文字基本样式设置，包括（inherit, color, fontSize, fontWeight, fontStyle, letterSpacing, wordSpacing, textBaseline, height, locale, foreground, background,） |
|---|---|
| textAlign | 文本对齐方式（如左对齐，右对齐，中心对齐等） |
| textDirection | 有两种方式：TextDirection.rtl: 在这里插入图片描述
 在这里插入图片描述
|
| locale | 分别是languageCode，scriptCode和countryCode的语言， 脚本和 区域。 |
| softWrap | 文本是否可以换行 |
| overflow | 对文本进行处理，如果不换行结尾显示省略，还是变模糊等有个属性值（TextOverflow.clip，TextOverflow.ellipsis，TextOverflow.fade） |
| textScaleFactor | 文本比例缩放因子 |
| maxLines | 文本最多显示行数 |
代码如下：
class TestText extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Text(
'hello world hello world hello world hello world hello world hello world',
textAlign: TextAlign.left,
textDirection: TextDirection.ltr,
locale: Locale.fromSubtags(languageCode: 'und'),
softWrap: true,
overflow: TextOverflow.clip,
textScaleFactor: 1.5,
maxLines: 2,
semanticsLabel: ,
style: TextStyle(
inherit: false,
color: Colors.blue,
fontSize: 20,
height: 1
),
);
}
}
对于文字样式属性的基本了解：
| 属性 | 介绍 |
|---|---|
| inherit | 是否继承TextSpan tree的样式，默认为true |
| color | 字体颜色 |
| fontSize | 字体大小 |
| fontWeight | 字体的权重 通过这个fontWeight: FontWeight.w100调节字体的粗细 |
| fontStyle | 字体样式，有斜体字，正常字体 |
| letterSpacing | 字符间距 |
| wordSpacing | 字间距，包括一个单词与一个单词之间的间距 |
| textBaseline | 文本基线 |
| height | 行高 |
| foreground | 文本前景绘制图 |
| background | 文本背景绘制图 |
| decoration | 添加上划线，下划线，删除线（如TextDecoration.lineThrough） |
style: TextStyle(
inherit: false,
color: Colors.blue,
fontSize: 20,
fontWeight: FontWeight.w100,
fontStyle: FontStyle.italic,
letterSpacing: 1.0,
wordSpacing: 20,
textBaseline: TextBaseline.ideographic,
height: 1,
decoration: TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.dashed,
background:mPaint,
),
在这里插入图片描述
1.Text.rich
可以显示具有不同样式TextSpan的段落。
在他的构造器中多了TextSpan参数。
const Text.rich(this.textSpan, {
Key key,
this.style,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
}): assert(textSpan != null),
data = null,
super(key: key);
TextSpan的构造器为：
const TextSpan({
this.style,
this.text,
this.children,
this.recognizer,
});
对于这几个参数的介绍：
| 参数名 | 描述 |
|---|---|
| style | 和Text控件的无差别 |
| text | 文本标签 |
| children | 集合，添加多个textSpan |
| recognizer | 手势识别，点击等一系列操作 |
class TestTextRich extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text.rich(
TextSpan(
text: "hello world",
children: <TextSpan>[
TextSpan(
text: "Hello world",
style: TextStyle(
inherit: true,
fontStyle: FontStyle.italic
)
),
TextSpan(
text: "hello world",
style: TextStyle(
inherit: false,
fontWeight: FontWeight.bold,
fontSize: 50,
decoration: TextDecoration.underline
)
),
],
style: TextStyle(
inherit: false,
fontSize: 100,
fontStyle: FontStyle.italic,
),
recognizer: new TapGestureRecognizer()
..onTap = () {
print("点击了父TextSpan");
},
),
softWrap: true,
textDirection: TextDirection.rtl,
textAlign: TextAlign.center,
);
}
在这里插入图片描述
