阅读 533

[Flutter package] 富文本便捷配置库

flutter_rich_text

初衷

我们在写App的时候,需要使用富文本,最近我有一个垃圾分类的app,就是用到了局部加粗的功能,直接使用TextSpan的话,代码会稍显啰嗦,恰逢最近咸鱼的同学新发布了关于富文本的文章,我也决定写一个富文本的库,方便大家定制富文本

用法

用这个库,可以通过两种方式创建富文本

1. 通过一个数组创建,每个元素是一段文字+对应样式

RichText(
    overflow: TextOverflow.ellipsis,
    text: richTextForStyledTexts([
      RichStyleText(
          'aaa',
          TextStyle(
            color: Colors.red,
            fontSize: 20,
          )),
      RichStyleText('bbb',
          TextStyle(color: Colors.grey, fontSize: 20, fontWeight: FontWeight.w900)),
      RichStyleText('ccc',
          TextStyle(color: Colors.blue, fontSize: 10, fontWeight: FontWeight.w500)),
      RichStyleText('ddd',
          TextStyle(color: Colors.grey, fontSize: 50, fontWeight: FontWeight.w900))
    ]))
复制代码

其核心方法是richTextForStyledTexts,每一段文字,是一个RichStyleText实例

2. 传入整个字符串,再传入一个样式数组,每个样式数组定义某个范围的样式

RichText(
    overflow: TextOverflow.ellipsis,
    text: richTextForStyledRange(
        'aaabbbcccddd',
        TextStyle(
          color: Colors.black,
        ),
        [
          RichStyleRange.length(
              0,
              3,
              TextStyle(
                color: Colors.red,
                fontSize: 20,
              )),
          RichStyleRange.length(3, 3,
              TextStyle(color: Colors.grey, fontSize: 20, fontWeight: FontWeight.w900)),
          RichStyleRange.length(6, 3,
              TextStyle(color: Colors.blue, fontSize: 10, fontWeight: FontWeight.w500)),
          RichStyleRange.length(9, 3,
              TextStyle(color: Colors.grey, fontSize: 50, fontWeight: FontWeight.w900))
        ]))
复制代码

其核心方法是richTextForStyledRange,需要传入完整文字,全局样式,需要个性化的局部的样式,局部样式使用RichStyleRange实例表示

效果

两种方式,都能达到同样的效果,就看在你代码里怎么使用方便了。

关注下面的标签,发现更多相似文章
评论