extended text 相關(guān)文章
- Flutter RichText支持圖片顯示和自定義圖片效果
- Flutter RichText支持自定義文本溢出效果
- Flutter RichText支持自定義文字背景
- Flutter RichText支持特殊文字效果
- Flutter RichText支持文本選擇
大晚上的先上個圖片震撼一下大家的心靈拦英。
文本中帶有圖片/表情，在現(xiàn)在的app中壹士，是及其常見的事情螟蒸，但是在Flutter當中抄瑟，這是個缺失的功能。
就向上圖一樣贺纲，產(chǎn)品和UI設(shè)計是不可能放過我的。所以Extended_Text就在這個天時地利人和的情況下誕生了。
花了些時間把Text的源碼都看一遍墨状，很自然的看到了最后用Canvas在畫字，其實Flutter 的widget只是一個數(shù)據(jù)的殼，最終還是都會落實在Canvas上面感耙。那么我們不是就可以在這個Canvas上面畫我們像要的圖片了嗎？
答案當然是可以的,接下來只酥，我們把源碼Copy出來裂允，魔改吧！！
首先想到的是，這個圖片，肯定也要占用文字的位置隙赁，那么我是不是可以畫個透明的文字，然后在這個文字的位置上畫圖呢弟灼？
先百度了一下(感謝RealRichText提供的思路)，\u200B 字符代表 ZERO WIDTH SPACE，就是寬帶為0的空白欧穴，我拿TextPainter試了下笑诅，確實是這樣同蜻，layout出來的Width總是0，不管fontSize是多少默责，當然高度會隨fontSize變化。結(jié)合TextStyle里面的letterSpacing，這樣我們就能控制這個圖片文字的寬度了芦鳍。
/// The amount of space (in logical pixels) to add between each letter.
/// A negative value can be used to bring the letters closer.
final double letterSpacing;
接下來籍琳，又是用TextPainter势誊，計算出來26 fontSize的\u200B的高度為30DP，
這樣我們就知道怎么把圖片文字的高度轉(zhuǎn)為了文字的fontSize了勋颖。茄厘。
//[imageSpanTransparentPlaceholder] width is zero,
///so that we can define letterSpacing as Image Span width
const String imageSpanTransparentPlaceholder = "\u200B";
///transparentPlaceholder is transparent text
//fontsize id define image height
//size = 30.0/26.0 * fontSize
///final double size = 30.0;
///fontSize 26 and text height =30.0
//final double fontSize = 26.0;
double dpToFontSize(double dp) {
return dp / 30.0 * 26.0;
}
圖片文字那么必然要有圖片了，那么我們就提供個ImageProvider來裝載圖片谈宛，因為做過extended image次哈，這部分不要太熟悉了，對image不了解的同學可以去看看 這個 全能的Image
當然我沒有忘記給大家準備網(wǎng)絡(luò)圖片緩存的把ImageProvider,以及清除它們的方法clearExtendedTextDiskCachedImages
CachedNetworkImage(this.url,
{this.scale = 1.0,
this.headers,
this.cache: false,
this.retries = 3,
this.timeLimit,
this.timeRetry = const Duration(milliseconds: 100)})
: assert(url != null),
assert(scale != null);
/// Clear the disk cache directory then return if it succeed.
/// <param name="duration">timespan to compute whether file has expired or not</param>
Future<bool> clearExtendedTextDiskCachedImages({Duration duration}) async
需要注意的是吆录，因為ImageSpan沒法獲取到BuildContext窑滞，所以我們需要在Extended text build的時候哀卫，把ImageProvider 所需要的ImageConfiguration準備好
void _createImageConfiguration(List<TextSpan> textSpan, BuildContext context) {
textSpan.forEach((ts) {
if (ts is ImageSpan) {
ts.createImageConfiguration(context);
} else if (ts.children != null) {
_createImageConfiguration(ts.children, context);
}
});
}
接下來就要到核心繪畫文字的類里面去了ExtendedRenderParagraph
在Paint方法中，在畫字之前我們來處理這個圖片(反正文字是透明的赶站，而且0的width渣窜，只是有個與前后文字的距離（圖片的寬）),在繪畫圖片的時候坝橡，我把畫布移動到offset的地方贝淤，就是整個文字開始繪畫的點招刨，方便后面計算的繪畫
void paint(PaintingContext context, Offset offset) {
_paintSpecialText(context, offset);
_paint(context, offset)捌肴；
}
void _paintSpecialText(PaintingContext context, Offset offset) {
final Canvas canvas = context.canvas;
canvas.save();
///move to extended text
canvas.translate(offset.dx, offset.dy);
///we have move the canvas, so rect top left should be (0,0)
final Rect rect = Offset(0.0, 0.0) & size;
_paintSpecialTextChildren(<TextSpan>[text], canvas, rect);
canvas.restore();
}
在_paintSpecialTextChildren中济榨，循環(huán)找尋ImageSpan.
注意使用getOffsetForCaret方法樱拴，我們來判斷這個TextSpan是否已經(jīng)是文本溢出了。
Offset topLeftOffset = getOffsetForCaret(
TextPosition(offset: textOffset),
rect,
);
//skip invalid or overflow
if (topLeftOffset == null ||
(textOffset != 0 && topLeftOffset == Offset.zero)) {
return;
}
textOffset起始為0，當跳過一個TextSpan，我們加上該TextSpan的offset铅檩，然后繼續(xù)查找
textOffset += ts.toPlainText().length;
如果是一個ImageSpan，首先因為這個\u200B 沒有寬度兔沃，而寬度是我們設(shè)置的letterSpacing殿雪，所以這個圖片繪畫的地方應(yīng)該要向前移動width / 2.0
if (ts is ImageSpan) {
///imageSpanTransparentPlaceholder \u200B has no width, and we define image width by
///use letterSpacing,so the actual top-left offset of image should be subtract letterSpacing(width)/2.0
Offset imageSpanOffset = topLeftOffset - Offset(ts.width / 2.0, 0.0);
if (!ts.paint(canvas, imageSpanOffset)) {
//image not ready
ts.resolveImage(
listener: (ImageInfo imageInfo, bool synchronousCall) {
if (synchronousCall)
ts.paint(canvas, imageSpanOffset);
else {
if (owner == null || !owner.debugDoingPaint) {
markNeedsPaint();
}
}
});
}
}
ImageSpan的paint方法为迈，如果圖片還沒加載，那么我們需要resolveImage并且監(jiān)聽回調(diào)缺菌，在回調(diào)的時候葫辐，如果是一個同步的回調(diào)，那么這個時候Canvas應(yīng)該不沒有被dispose掉伴郁，那么我們就直接畫上另患。否則判斷owner，并且設(shè)置markNeedsPaint蛾绎，讓整個Text再次繪畫昆箕。
上面就是怎么在文本中加入一個圖片，然而產(chǎn)品可不是那么好對付的租冠，產(chǎn)品說鹏倘，那個圖片給我加個圓角，加個Border顽爹，加個加載效果纤泵，給弄成圓形的，巴拉巴拉...說累了镜粤，你就直接按照下面的圖來做吧捏题。
看到這樣的需求，我的表情為
不過其實掌握了Canvas的一些技巧之后肉渴，這點事情難不倒我,加上2個回調(diào)公荧，在繪畫圖片之前和之后，做你想要做的任何事情同规。
///you can paint your placeholder or clip
///any thing you want
final BeforePaintImage beforePaintImage;
///you can paint border,shadow etc
final AfterPaintImage afterPaintImage;
比如說在圖片加載之后來個loading 占位,你可以這樣做
ImageSpan(CachedNetworkImage(imageTestUrls.first), beforePaintImage:
(Canvas canvas, Rect rect, ImageSpan imageSpan) {
bool hasPlaceholder = drawPlaceholder(canvas, rect, imageSpan);
if (!hasPlaceholder) {
clearRect(rect, canvas);
}
return false;
},
畫個背景循狰，畫個字窟社，so easy
bool drawPlaceholder(Canvas canvas, Rect rect, ImageSpan imageSpan) {
bool hasPlaceholder = imageSpan.imageSpanResolver.imageInfo?.image == null;
if (hasPlaceholder) {
canvas.drawRect(rect, Paint()..color = Colors.grey);
var textPainter = TextPainter(
text: TextSpan(text: "loading", style: TextStyle(fontSize: 10.0)),
textAlign: TextAlign.center,
textScaleFactor: 1,
textDirection: TextDirection.ltr,
maxLines: 1)
..layout(maxWidth: rect.width);
textPainter.paint(
canvas,
Offset(rect.left + (rect.width - textPainter.width) / 2.0,
rect.top + (rect.height - textPainter.height) / 2.0));
}
return hasPlaceholder;
}
void clearRect(Rect rect, Canvas canvas) {
///if don't save layer
///BlendMode.clear will show black
///maybe this is bug for blendMode.clear
canvas.saveLayer(rect, Paint());
canvas.drawRect(rect, Paint()..blendMode = BlendMode.clear);
canvas.restore();
}
其他效果請參見 自定義圖片
最后放上 Github Extended_Text，如果你有什么不明白的地方绪钥，請告訴我灿里，歡迎加入Flutter Candies，一起生產(chǎn)可愛的Flutter 小糖果(QQ群:181398081)
Extended Text的功能遠遠不只這些程腹，將在下面的幾篇文章中慢慢道來匣吊。
