Flutter - 文字控件(进阶二)

前面介绍了Text部件，可是它只能对文字设置同一种文字样式，那么如果我们要对同一行文字设置多种样式该如何呢？ 这次我们就会用到RichText这个部件了。
我们先看看RichText里面需要的一些参数:

richtext.png

必要属性就是text了，它是TextSpan类型的，那这时候我们就大概知道怎么用了，代码如下:

class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: '山不在高，有仙则名。水不在深，有龙则灵。',
        style: TextStyle(
          color: Colors.lightBlue,
          fontSize: 25.0,
        ),
        children: [
          TextSpan(
            text: '斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。',
            style: TextStyle(
              color: Colors.lightGreenAccent,
              fontSize: 20.0,
            ),
          ),
          TextSpan(
            text: '谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？',
            style: TextStyle(
              color: Colors.lime,
              fontSize: 15.0,
            ),
          )
        ],
      ),
    );
  }
}

用TextSpan先定义第一部分的文字样式。 然后TextSpan里面有个children属性，里面可以放TextSpan的数组，这样我们只要堆叠这个TextSpan并设置不同样式，就能实现我们的同行文字显示不同样式的效果了。

效果图如下:

e.png