Widget for Week: Text

每周整理一个控件之：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

如果你还有啥需要的样式需要实现，请留言，我会尽量尝试去实现。