前言
Flutter 中的 Text
一直都有一些不尽如意的地方,而大家又会经常会跟原生平台作对比,
为什么支付宝,微信可以,Flutter 不可以 ?Flutter 辣鸡。
不行就只能乖乖被怼
,Flutter
何时能站起来?
文本溢出(省略号)没法自定义
文本溢出(省略号)没法自定义,该问题 ExtendedText 已解决,你可以通过设置 ExtendedText.overflowWidget
来自定义任意溢出内容。
ExtendedText(
overflowWidget: TextOverflowWidget(
align: TextOverflowAlign.center,
child: Container(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text(
'\u2026 ',
style: TextStyle(height: 1),
),
InkWell(
child: Image.asset(
'assets/candies.png',
width: 20,
height: 20,
),
onTap: () {
launch('https://github.com/fluttercandies/extended_text');
},
)
],
),
),
),
);
image.png
无法指定文本溢出(省略号)的位置
无法指定文本溢出(省略号)的位置,比如下面两种常见场景。
- 省略号在中间
- 省略号在前面
Flutter
不支持,那么下面我们看看 原生
以及 web
端是否支持。(如有不对,望指正。)
平台 | 开头 | 中间 | 结尾 |
---|---|---|---|
android | android:ellipsize = "start" |
android:ellipsize = "middle" |
android:ellipsize = "end" |
Ios | NSLineBreakByTruncatingHead |
NSLineBreakByTruncatingMiddle |
NSLineBreakByTruncatingTail |
web | text-overflow: ellipsis clip |
不支持 | text-overflow: clip ellipsis |
flutter | 不支持 | 不支持 | TextOverflow.ellipsis |
注意的是 android
只有在一行的情况才有效,需要设置 android:singleline = "true"
;web
不支持中间;Ios 是其中支持最好的。
可以看到,原生
以及 web
端对该功能的支持比 Flutter
好太多了。那么我们 Flutter
就没办法了吗?当然不是,之前解决 文本溢出(省略号)没法自定义 ,其原理完全可以应用在这个功能上面,以下为最终效果图。
原理
performLayout
在 performLayout 方法中,TextPainter
经过 layout
就可以知道当前文本是否有溢出。
final Size textSize = _textPainter.size;
final bool textDidExceedMaxLines = _textPainter.didExceedMaxLines;
size = constraints.constrain(textSize);
final bool didOverflowHeight = size.height < textSize.height || textDidExceedMaxLines;
final bool didOverflowWidth = size.width < textSize.width;
// TODO(abarth): We're only measuring the sizes of the line boxes here. If
// the glyphs draw outside the line boxes, we might think that there isn't
// visual overflow when there actually is visual overflow. This can become
// a problem if we start having horizontal overflow and introduce a clip
// that affects the actual (but undetected) vertical overflow.
final bool hasVisualOverflow = didOverflowWidth || didOverflowHeight;
计算不溢出的情况
这个还是要依靠 TextPainter
,通过二分查找,找到 不溢出的
和 溢出
临界点 X
。
开头 | 中间 | 结尾 |
---|---|---|
[0,X] |
[m,X] ,m 为中间文本的索引位置 |
文本不需要改变,无需计算 |
该 Range
范围内的文本将不会显示。
处理文本
比如 abcdef
, 我们找到的 Range
为 [2,3]
,即最终显示 ab...ef
。考虑支持选择复制,所以我们这里不能简单丢掉 cd
。这里利用到 SpecialTextSpan 的一个功能。
你见到的并不是真实的
SpecialTextSpan(
'abef',
actualText: 'abcdef',
);
溢出内容绘制
开头 | 中间 | 结尾 |
---|---|---|
画在文本开始位置 | 画在文本中间位置 | 画在文本结尾位置 |
实际上,我们要做的时候,在这些位置绘制溢出内容,并且遮住下面的文字。为了达到这个目的,
- 根据
Range
获得TextSelection
,利用TextPainter.getBoxesForSelection
获取该段遮蔽文字的区域overflowRect
。 - 用
overflowRect
跟溢出内容的大小取并集。 - 移动
Range
继续取并集, 直到overflowRect
跟溢出内容的大小完全包容。(确保溢出内容显示以及遮蔽文字不会露出来)
代码在_setOverflowRect 方法中。
遮蔽文字
在之前的版本中,由于 Paint()..blendMode = BlendMode.clear
无法对文字进行清除,只好利用 canvas.clipPath(path)
将 overflowRect
部分的文字裁剪掉。现在官方已经修复掉这个问题,现在你可以这样做。(实际中小伙伴经常提起不知道怎么做摄像头的蒙层,其实你可以利用这个办法,将蒙层挖一个孔。)
if (_overflowRect != null) {
context.canvas.saveLayer(_offset & size, Paint());
}
// 绘制文字
_paint(context, offset);
if (_overflowRect != null) {
// 清除掉这块区域的文字
context.canvas.drawRect(
_overflowRect!.shift(_offset), Paint()..blendMode = BlendMode.clear);
context.canvas.restore();
}
更多的细节
其实上面只是大概讲了一下思路,其中是包含很多计算的,感兴趣的童鞋,可以看看这个文件.
缺点
- 利用
TextPainter
的一些方法来实现最终计算,TextPainter
其实也是有很多限制的,比如 对WidgetSpan
的计算错误,虽然已经利用一些workaround
来规避了。但是官方引擎的每次改动都可能对结果有影响,反正是被坑过,懂的都懂。 - 对面
middle
这种情况,文字每一行行高如果相差太大的话,极可能会导致计算失败,TextPainter
并没有提供一个api
,来直接告诉我们这些信息。
换行和溢出不友好
换行和溢出不友好, 比如在 Flutter
中显示下面一段话。
您的糖果服务已续期,服务订单号: 12345678910987654321110。
现实 | 期望 |
---|---|
image.png | image.png |
image.png | image.png |
这个问题也不是 Flutter
独有的,关系到对 word
排版的处理。目前的解决方案,是向文本中插入 zero-width space(\u{200B}
).
Characters('abc').join('\u{200B}');
当然你可以直接将 ExtendedText.joinZeroWidthSpace
设置为
true
。
ExtendedText(
joinZeroWidthSpace: true,
)
或者你也可以利用 ExtendedTextLibrary 库中的扩展方法。
- 文本
String input='abc'.joinChar('\u{200B}');
- InlineSpan
InlineSpan innerTextSpan;
innerTextSpan = joinChar(
innerTextSpan,
Accumulator(),
'\u{200B}',
);
但是你需要注意以下问题:
-
word
不再是word
,你将无法通过双击选择word
。 -
文本被修改了, 如果
ExtendedText.selectionEnabled
为true
, 你需要重写TextSelectionControls
的handleCopy
,将 zero-width space(\u{200B}
) 去掉。
class MyTextSelectionControls extends TextSelectionControls {
@override
void handleCopy(TextSelectionDelegate delegate,
ClipboardStatusNotifier? clipboardStatus) {
final TextEditingValue value = delegate.textEditingValue;
String data = value.selection.textInside(value.text);
// remove zeroWidthSpace
data = data.replaceAll('\u{200B}', '');
Clipboard.setData(ClipboardData(
text: value.selection.textInside(value.text),
));
clipboardStatus?.update();
delegate.textEditingValue = TextEditingValue(
text: value.text,
selection: TextSelection.collapsed(offset: value.selection.end),
);
delegate.bringIntoView(delegate.textEditingValue.selection.extent);
delegate.hideToolbar();
}
}
最终效果图如下,可以看到文字排版更加紧凑了。
image.png结语
ExtendedText 不算完美,但是应该算是能够用了吧。有些时候,想法只有去实现才会成真,当思路在大脑中一步一步确认之后,就剩下实践了,从最简单的场景到复杂场景,脚踏实地,做人不也是这样吗?
爱 Flutter
,爱糖果
,欢迎加入Flutter Candies,一起生产可爱的Flutter小糖果[图片上传失败...(image-543384-1619359908929)]QQ群:181398081
最最后放上 Flutter Candies 全家桶,真香。
[图片上传失败...(image-e51cba-1619359908929)]
网友评论