[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實例表示

效果

兩種方式，都能達到一樣的效果，就看在你代碼裏怎麼使用方便了。