Flutter Widgets_ Text，android开发视频硬编码

textAlign	Result
TextAlign.left	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9P801mPO-1637984675519)(https://user-gold-cdn.xitu.io/2018/5/24/163921a5c569fa86?imageView2/0/w/1280/h/960/ignore-error/1)]
TextAlign.right	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5H8sR2PP-1637984675520)(https://user-gold-cdn.xitu.io/2018/5/24/163921a5e3ffbd98?imageView2/0/w/1280/h/960/ignore-error/1)]
TextAlign.center	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2NcoN3FC-1637984675520)(https://user-gold-cdn.xitu.io/2018/5/24/163921a5ea835653?imageView2/0/w/1280/h/960/ignore-error/1)]
TextAlign.justify(两端对齐)	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-98RjaZqn-1637984675521)(https://user-gold-cdn.xitu.io/2018/5/24/163921a5eed45fc4?imageView2/0/w/1280/h/960/ignore-error/1)]
TextAlign.start	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NOPiyxzm-1637984675522)(https://user-gold-cdn.xitu.io/2018/5/24/163921a5eff85a4b?imageView2/0/w/1280/h/960/ignore-error/1)]
TextAlign.end	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-76i1KFe7-1637984675522)(https://user-gold-cdn.xitu.io/2018/5/24/163921a6099c5434?imageView2/0/w/1280/h/960/ignore-error/1)]

textDirection

文本方向

body: new Container(
width: 400.0,
height: 200.0,
color: Colors.greenAccent,
child: new Text(“hello world sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd”,
textDirection: TextDirection.rtl,
style: new TextStyle(
color: Colors.purple,
fontSize: 40.0,
)
)
)

TextDirection	Result
TextDirection.ltr	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IKBn2fnC-1637984675523)(https://user-gold-cdn.xitu.io/2018/5/24/163921a60a80a9d6?imageView2/0/w/1280/h/960/ignore-error/1)]
TextDirection.rtl	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r0SbblIG-1637984675523)(https://user-gold-cdn.xitu.io/2018/5/24/163921a61316a4cd?imageView2/0/w/1280/h/960/ignore-error/1)]

softWrap

是否自动换行，若为false，文字将不考虑容器大小，单行显示，超出屏幕部分将默认截断处理

body: new Container(
width: 400.0,
height: 200.0,
color: Colors.greenAccent,
child: new Text(“hello world sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd”,
softWrap: false,
style: new TextStyle(
color: Colors.purple,
fontSize: 40.0,
)
)
)

softWrap	Result
true	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8JGOOuNc-1637984675524)(https://user-gold-cdn.xitu.io/2018/5/24/163921a60a80a9d6?imageView2/0/w/1280/h/960/ignore-error/1)]
false	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U3QB38tX-1637984675524)(https://user-gold-cdn.xitu.io/2018/5/24/163921a617fe0369?imageView2/0/w/1280/h/960/ignore-error/1)]

显然，当softWrap为false而文字长度超出屏幕宽度时，会出现截断的现象。

overflow

当文字超出屏幕的时候，如何处理

body: new Container(
width: 300.0,
height: 200.0,
color: Colors.greenAccent,
child: new Text(“hello world sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd”,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: new TextStyle(
color: Colors.purple,
fontSize: 40.0,
)
)
)

overflow	Result
TextOverflow.clip(裁剪)

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OJpW13JZ-1637984675400)(https://user-gold-cdn.xitu.io/2018/5/24/163921a617fe0369?imageView2/0/w/1280/h/960/ignore-error/1)] |
| TextOverflow.fade(渐隐) | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tQa1eUkM-1637984675414)(https://user-gold-cdn.xitu.io/2018/5/24/163921a626dfb37e?imageView2/0/w/1280/h/960/ignore-error/1)] |
| TextOverflow.ellipsis(省略号) | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L2psIanu-1637984675415)(https://user-gold-cdn.xitu.io/2018/5/24/163921a62d014dd4?imageView2/0/w/1280/h/960/ignore-error/1)] |

textScaleFactor

字体显示倍率，上面的例子使用的字体大小是40.0，将字体设置成20.0，然后倍率为2，依然可以实现相同的效果

body: new Container(
width: 400.0,
height: 200.0,
color: Colors.greenAccent,
child: new Text(“hello world sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd”,
overflow: TextOverflow.fade,
textScaleFactor: 2.0,
softWrap: false,
style: new TextStyle(
color: Colors.purple,
fontSize: 20.0,
)
)
)

maxLines

最大行数设置

body: new Container(
width: 400.0,
height: 200.0,
color: Colors.greenAccent,
child: new Text(“hello world sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd”,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: new TextStyle(
color: Colors.purple,
fontSize: 40.0,
)
)
)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AoG3OsdL-1637984675416)(https://user-gold-cdn.xitu.io/2018/5/24/163921a6307e5ef4?imageView2/0/w/1280/h/960/ignore-error/1)]

data & textSpan

data，普通的String类型，无需赘述 textSpan，TextSpan类型，个人觉得TextSpan最大的用处在于处理多种类型和显示效果的文字，以及各自点击事件的处理，看下面这个例子。

class HomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Container(
width: 400.0,
height: 200.0,
color: Colors.greenAccent,
child: new Text.rich(new TextSpan(
text: “one”,
style: new TextStyle(
fontSize: 40.0,
color: Colors.green,
decoration: TextDecoration.underline,
decorationColor: Colors.purple,
decorationStyle: TextDecorationStyle.wavy,
),
children: [
new TextSpan(
text: “TWO”,
style: new TextStyle(
fontSize: 40.0,
color: Colors.green,
decoration: TextDecoration.underline,
decorationColor: Colors.purple,
decorationStyle: TextDecorationStyle.wavy,
),
recognizer: new TapGestureRecognizer()
…onTap = () =>
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text(“TWO is tapped”),
)),),
new TextSpan(
text: “THREE”,
style: new TextStyle(
fontSize: 40.0,
color: Colors.black12,
decoration: TextDecoration.overline,
decorationColor: Colors.redAccent,
decorationStyle: TextDecorationStyle.dashed,
), recognizer: new LongPressGestureRecognizer()
…onLongPress = () =>
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text(“THREE is longpressed”),
)),),
new TextSpan(
text: “four”,
style: new TextStyle(
fontSize: 40.0,
color: Colors.green,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.yellowAccent,
decorationStyle: TextDecorationStyle.dotted,
),
recognizer: new TapGestureRecognizer()
…onTap = () {
var alert = new AlertDialog(
title: new Text(“Title”),
content: new Text(“four is tapped”),
);
corationStyle: TextDecorationStyle.dotted,
),
recognizer: new TapGestureRecognizer()
…onTap = () {
var alert = new AlertDialog(
title: new Text(“Title”),
content: new Text(“four is tapped”),
);