extended text 相關(guān)文章
- Flutter RichText支持圖片顯示和自定義圖片效果
- Flutter RichText支持自定義文本溢出效果
- Flutter RichText支持自定義文字背景
- Flutter RichText支持特殊文字效果
- Flutter RichText支持文本選擇
今天繼續(xù)講講怎么樣快速構(gòu)建特殊文字以及自定義背景谆甜，我喜歡那個圖，再次送上
image
大家刷微博應(yīng)該都經(jīng)匙还祝看到罕袋，文字里面有一些比如@某某某，或者一些話題的鏈接朵夏。但是服務(wù)器端一般都是給你一段文字，你需要自己去做匹配捏肢。以前可能每加個邏輯饥侵，你就要寫一段代碼，但是有了Extended text奉瘤，一切都變得so easy煮甥。
舉個栗子成肘，比如我們要匹配@某某某斧蜕，我們只需要繼承SpecialText，并且定義它的開始標志和結(jié)束標志
class AtText extends SpecialText {
static const String flag = "@";
AtText(TextStyle textStyle, SpecialTextGestureTapCallback onTap)
: super(flag, " ", textStyle, onTap: onTap);
@override
TextSpan finishText() {
// TODO: implement finishText
final String atText = toString();
return TextSpan(
text: atText,
style: textStyle?.copyWith(color: Colors.blue, fontSize: 16.0),
recognizer: TapGestureRecognizer()
..onTap = () {
if (onTap != null) onTap(atText);
});
}
}
然后洒闸，我們需要定義匹配規(guī)則,繼承SpecialTextSpanBuilder均芽，實現(xiàn)方法
class MySpecialTextSpanBuilder extends SpecialTextSpanBuilder {
@override
TextSpan build(String data,
{TextStyle textStyle, SpecialTextGestureTapCallback onTap}) {
if (data == null || data == "") return null;
List<TextSpan> inlineList = new List<TextSpan>();
if (data != null && data.length > 0) {
SpecialText specialText;
String textStack = "";
//String text
for (int i = 0; i < data.length; i++) {
String char = data[i];
if (specialText != null) {
if (!specialText.isEnd(char)) {
specialText.appendContent(char);
} else {
inlineList.add(specialText.finishText());
specialText = null;
}
} else {
textStack += char;
specialText =
createSpecialText(textStack, textStyle: textStyle, onTap: onTap);
if (specialText != null) {
if (textStack.length - specialText.startFlag.length >= 0) {
textStack = textStack.substring(
0, textStack.length - specialText.startFlag.length);
if (textStack.length > 0) {
inlineList.add(TextSpan(text: textStack, style: textStyle));
}
}
textStack = "";
}
}
}
if (specialText != null) {
inlineList.add(TextSpan(
text: specialText.startFlag + specialText.getContent(),
style: textStyle));
} else if (textStack.length > 0) {
inlineList.add(TextSpan(text: textStack, style: textStyle));
}
}
// TODO: implement build
return TextSpan(children: inlineList, style: textStyle);
}
@override
SpecialText createSpecialText(String flag,
{TextStyle textStyle, SpecialTextGestureTapCallback onTap}) {
if (flag == null || flag == "") return null;
// TODO: implement createSpecialText
if (isStart(flag, AtText.flag)) {
return AtText(textStyle, onTap);
} else if (isStart(flag, EmojiText.flag)) {
return EmojiText(textStyle);
} else if (isStart(flag, DollarText.flag)) {
return DollarText(textStyle, onTap);
}
return null;
}
}
最后使用的時候是這樣子的
ExtendedText(
"[love]Extended text help you to build rich text quickly. any special text you will have with extended text. "
"\n\nIt's my pleasure to invite you to join \$FlutterCandies\$ if you want to improve flutter .[love]"
"\n\nif you meet any problem, please let me konw @zmtzawqlp .[sun_glasses]",
onSpecialTextTap: (String data) {
if (data.startsWith("\$")) {
launch("https://github.com/fluttercandies");
} else if (data.startsWith("@")) {
launch("mailto:zmtzawqlp@live.com");
}
},
specialTextSpanBuilder: MySpecialTextSpanBuilder(),
overflow: TextOverflow.ellipsis,
//style: TextStyle(background: Paint()..color = Colors.red),
maxLines: 10,
),
是不是覺得特別簡單，而且可擴展性強劲妙，媽媽再也不會擔心我沒法做特殊文字的匹配了镣奋。。
上個效果圖哈
image
最后放上 Github Extended_Text余赢，如果你有什么不明白的地方，請告訴我没佑，歡迎加入Flutter Candies蛤奢，一起生產(chǎn)可愛的Flutter 小糖果(QQ群:181398081)
