Flutter小课堂：Text知多少

知多少"/>

Flutter小课堂：Text知多少

Flutter小课堂开课了,今天的主角是Text,文字和图片几乎统治了我们的整个视觉世界
今天将带你了解一下Flutter中Text的一些属性及用法

---

1.简单使用

可以通过工具栏开启，显示文字基线

var container=Container(color: Color(0x6623ffff),width: 200,height: 200*0.618,child: text,
);var text=Text("toly-张风捷特烈-1994`");
复制代码

---

2.Text的style属性

2.1:常用属性

style对应的是TextStyle对象，常用的几个属性如下

var style = TextStyle(color: Colors.red, //颜色backgroundColor: Colors.white,//背景色fontSize: 20,//字号fontWeight: FontWeight.bold,//字粗fontStyle: FontStyle.italic,//斜体letterSpacing: 10,//字间距
);var text = Text("toly-张风捷特烈-1994`",style: style,);复制代码

可见文字到了容器的边上会自动换行。

---

2.2:字体的修改:fontFamily属性

如何引用外来字体

var style = TextStyle(color: Colors.red, //颜色backgroundColor: Colors.white,//背景色fontFamily:"阿里惠普体"
);var text = Text("toly-张风捷特烈-1994`",style: style,);
复制代码

---

2.3：文字阴影:shadows属性

一开始看到shadows是一个List<ui.Shadow>感觉这嵌套的有点深啊
Shadow又是个没见过的类，并存在Flutter要啥给啥，没啥造啥的世界真理，造一个对象呗，反正不花钱。

var shadow = Shadow(color: Colors.black, //颜色blurRadius: 1, //虚化offset: Offset(2, 2)//偏移
);var style = TextStyle(color: Colors.grey, //颜色fontSize: 100, //字号shadows: [shadow]);var text = Text("张风捷特烈",style: style,
);
复制代码

• 多阴影

感觉有点奇怪，为什么是个List,那就搞条彩虹试试呗

const rainbow = [0xffff0000,0xffFF7F00,0xffFFFF00,0xff00FF00,0xff00FFFF,0xff0000FF,0xff8B00FF
];shadows() {var shadows = <Shadow>[];for (int i = 0; i < rainbow.length; i++) {shadows.add(Shadow(color: Color(rainbow[i]),blurRadius: i * 2.5,offset: Offset(-(1 + i) * 3.0, -(1 + i) * 3.0)));}return shadows;
}var style = TextStyle(color: Colors.black, //颜色fontSize: 100, //字号shadows: shadows());var text = Text("张风捷特烈",style: style,
);
复制代码

---

2.4:装饰线:decoration属性

对应的对象类型是TextDecoration，拥有四个静态常量，表现如下

var style = TextStyle(color: Colors.black, //颜色fontSize: 20, //字号decoration: TextDecoration.lineThrough);var text = Text("张风捷特烈",style: style,
);
复制代码

---

2.5:装饰线样式: decorationStyle属性

所对应的类型为TextDecoration枚举，一共五种，如下:

var style = TextStyle(color: Colors.black, //颜色fontSize: 20, //字号
//    shadows: shadows()decoration: TextDecoration.lineThrough,decorationColor: Color(0xffff0000),//装饰线颜色decorationStyle: TextDecorationStyle.wavy,decorationThickness: 0.8,//装饰线粗
);var text = Text("张风捷特烈",style: style,
);
复制代码

---

3.Text的其他属性

3.1:textAlign和textDirection

textDirection对应类型,TextDirection。包括两个枚举:ltr(左到右)和rtl(右到左)
textAlign在textDirection不同时有不同表现,如下图:

Text("张风捷特烈-toly-1994-9999999999999999",textAlign: TextAlign.justify,textDirection: TextDirection.ltr,style: TextStyle(color: Colors.black, //颜色fontSize: 14, //字号),)
复制代码

• TextDirection:extDirection.ltr时textAlign的表现

• TextDirection:extDirection.rtl时textAlign的表现

---

3.2:strutStyle属性

strutStyle对应类是StrutStyle,这个类是一个单独的文件，感觉应该挺重要
不过这个类看得不是非常懂,貌似是使用一个字体的骨架，但不用这个字体。
可以看出不同字体的基线是不同的,如果多种字体同时出现，未免会造成差别
使用统一的strutStyle可以让基线统一的同时又能保持字体的不同，大概就这个意思吧

var text =Text("张风捷特烈-toly-1994-9999999999999999",strutStyle: StrutStyle(fontFamily: '阿里惠普体',fontSize: 24,forceStrutHeight: true,),style: TextStyle(color: Colors.black, //颜色fontSize: 24, //字号fontFamily: "阿里惠普体"),
);
复制代码

---

3.3:softWrap和overflow属性

对应TextOverflow枚举对象，一共四枚，情况如下:
softWrap决定是否会自动换行

 Text("张风捷特烈-toly-1994-99999999999999999999",overflow: TextOverflow.clip,softWrap: false,style: TextStyle(color: Colors.black, //颜色fontSize: 24, //字号),)
复制代码

• softWrap为true(默认)时

• softWrap为false时

---

3.4:textScaleFactor和maxLines属性

maxLines 不用多说，显示的最大行数,textScaleFactor可以实现文字的缩放

var text =Text("张风捷特烈-toly-1994-9999999999999999",textScaleFactor: 0.5,maxLines: 2,//最多2行style: TextStyle(color: Colors.black, //颜色fontSize: 12, //字号),
);复制代码

好了，Text基本上就是这样，别忙走，还有的TextSpan呢

---

4.TextSpan

首先它不是一个Widget,其次它可以作为Text.rich()的入参
TextSpan的强大之处在于你可以在一行文字中使用很多样式，甚至添加别的控件

4.1:TextSpan源码中的示例

看源码时，源码中给了一个小例子蛮好的,这里讲一下
可以看出，一行文字中可以有多种样式，这就是TextSpan的基本用法

var span=TextSpan(text: 'Hello', // default text stylechildren: <TextSpan>[TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),],
);
return Text.rich(span,
);
复制代码

---

4.2:彩虹字

既然如此，自己动手，来写个彩虹字吧

const rainbowMap = {0xffff0000:"红色",0xffFF7F00:"橙色",0xffFFFF00:"黄色",0xff00FF00:"绿色",0xff00FFFF:"青色",0xff0000FF:"蓝色",0xff8B00FF:"紫色",
};var spans= <TextSpan>[];rainbowMap.forEach((k,v){spans.add(TextSpan(text: v+"   ",style: TextStyle(fontSize: 20.0, color: Color(k))),);});
var show = Text.rich(TextSpan(text: '七彩字：\n',style: TextStyle(fontSize: 16.0, color: Colors.black),children: spans));
复制代码

---

4.3:炫彩文章

既然如此，那就再玩玩呗，将一片文章变得多彩。这里匆匆的文章就不贴了

colorfulText(String str,{double fontSize=14}) {var spans= <TextSpan>[];for(var i=0;i<str.length;i++){spans.add(TextSpan(text: str[i],style: TextStyle(fontSize: fontSize, color: randomRGB())),);}return Text.rich(TextSpan(children: spans));
}///简单随机色
/// 
Color randomRGB() {Random random = Random();int r = 30 + random.nextInt(200);int g = 30 + random.nextInt(200);int b = 30 + random.nextInt(200);return Color.fromARGB(255, r, g, b);
}var show = colorfulText(cc,fontSize: 20);
复制代码

---

如果你想，做成开始那张图，文字随机大小也可以，反正TextSpan就是这么强大。
本文到此接近尾声了，如果想快速尝鲜Flutter，《Flutter七日》会是你的必备佳品;如果想细细探究它,那就跟随我的脚步，完成一次Flutter之旅。
另外本人有一个Flutter微信交流群，欢迎小伙伴加入，共同探讨Flutter的问题，本人微信号:zdl1994328，期待与你的交流与切磋。