Flutter Widgets

文本方向

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,
)
)
)

是否自动换行，若为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为false而文字长度超出屏幕宽度时，会出现截断的现象。

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

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,
)
)
)

《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)] |

字体显示倍率，上面的例子使用的字体大小是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,
)
)
)

最大行数设置

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，普通的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”),
);