[Flutter]RichText在段落中显示不同样式

需求

在一个段落中Text应用不同的样式。

演示

rich_text.jpg

实现

Flutter的RichText能实现一段文本应用不同的样式。

  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: 'This is ',
        style: TextStyle(color: Colors.black, fontSize: 18.0),
        children: <TextSpan>[
          TextSpan(
            text: 'bold ',
            style: TextStyle(fontWeight: FontWeight.bold, )
          ),
          TextSpan(
              text: 'text. '
          ),
          TextSpan(
              text: 'This is ',),
          TextSpan(
              text: 'larger ',
              style:
              TextStyle(fontSize: 22.0)),
          TextSpan(
              text: 'font size.',),
          TextSpan(
            text: 'This is ',),
          TextSpan(
              text: 'red ',
              style:
              TextStyle(color: Colors.red)),
          TextSpan(
            text: 'color.',),
        ],
      ),
    );
  }

源码

点击Github源码浏览下载本示例源码!