Flutter Text_ 扶我起来，2024Android春招面试

最新推荐文章于 2024-04-08 00:28:44 发布

高手程序员

最新推荐文章于 2024-04-08 00:28:44 发布

阅读量866

点赞数 25

分类专栏： 2024年程序员学习文章标签： flutter 面试职场和发展

本文链接：https://blog.csdn.net/2401_83621136/article/details/137128685

版权

2024年程序员学习专栏收录该内容

286 篇文章 1 订阅

订阅专栏

注意的是 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，来直接告诉我们这些信息。