每周整理一个控件之：Text
本文整理 Text 日常使用中(不)常见的一些样式，
text02.png
下划线&中划线
要给 Text 实现下划线，其实很简单，只需要给他添加 TextDecoration 即可, 线的颜色默认同 Text 的颜色。要想改变线的颜色，需要使用
Text("Text添加下划线", style: TextStyle(decoration: TextDecoration.underline))
Text("Text添加中划线", style: TextStyle(decoration: TextDecoration.lineThrough))
需要设置线的颜色，只需要添加decorationColor 属性设置颜色即可。
Text("Text添加红色中划线", style: TextStyle(decoration: TextDecoration.lineThrough, decorationColor: Colors.red))
如果需要设置线为 虚线、点线 效果
添加 decorationStyle 属性即可
enum TextDecorationStyle {
/// Draw a solid line 实线(默认)
solid,
/// Draw two lines 双实线
double,
/// Draw a dotted line 点虚线
dotted,
/// Draw a dashed line 虚线
dashed,
/// Draw a sinusoidal line 波浪线
wavy
}
设置不同的 shape 样式
Text 不支持直接设置 装饰器，所以不便于实现 带 shape 的 Text，所以换个思路，通过给他添加一个 Container 来实现 shape 效果，
1.全填充同背景色 shape
如下：代码实现了给一个 Text 添加了一个带弧形的矩形背景色。全填充背景色
Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: Colors.orangeAccent,
borderRadius: BorderRadius.all(Radius.circular(4)),
),
child: Text("Text 通过 Container 设置 shape 样式"),
)
2.全填充渐变背景色 shape
BoxDecoration 有一个 gradient 属性，可以用来设置渐变色
Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.green, Colors.red]),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Text("Text 通过 Container 设置 渐变色 shape 样式"),
)
3.边框样式的 shape
1 和 2 中都是设置了全填充色的 shape，还有一种边框样式的也比较常见，如下实现方式：
边框宽度为 4，边框颜色为红色，背景色为灰色。
Container(
padding: const EdgeInsets.all(4),
decoration: ShapeDecoration(
color: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
side: BorderSide(color: Colors.red, width: 3))),
child: Text("Text 通过 Container 设置 渐变色 shape 样式", style: TextStyle(color: Colors.white),),
)
富文本
Flutter 针对富文本也给我们提供了一个好用的组件，RichText 有钱的 Text，😆，此组件可以很简单的实现富文本，比如我们常见的一种 UI 就是，在电商商品的标题前边有时候会加一个"新"、"热卖"之类的标签，那么就可以方便的用这个组件来实现。
RichText(
text: TextSpan(text: "从前有座山,",
style: TextStyle(color: Colors.green),
children: <TextSpan>[
TextSpan(text: "山里有座庙,", style: TextStyle(backgroundColor: Colors.green, color: Colors.white)),
TextSpan(text: "庙里有个老和尚.", style: TextStyle(color: Colors.red)),
]),
),
var richTextStr = "Hot距离放假还有 N 个工作日";
RichText(
text: TextSpan(text: "",
style: TextStyle(color: Colors.green),
children: <TextSpan>[
TextSpan(text: widget.richTextStr.substring(0,3), style: TextStyle(backgroundColor: Colors.green, color: Colors.white)),
TextSpan(text: widget.richTextStr.substring(3,widget.richTextStr.length), style: TextStyle(color: Colors.red)),
]),
)
源码链接：
https://github.com/yanftch/book/blob/master/lib/demo/widgets/w_text.dart
如果你还有啥需要的样式需要实现，请留言，我会尽量尝试去实现。
