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

效果

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