BUG|Flutter Text组件和国际化

发现问题

新版本引入了一个新勋章，测试走查其多语言时发现，泰文版勋章名没有一行展示而是换行了，如图所示：

因为其他语言没问题、泰文版其他勋章名也是正常的，所以第一反应是有问题的泰文是不是误加了换行符？经查并没有。而且在限制勋章名Text组件最多展示一行且按照末尾打点后，原本换到第二行的内容也被打点掉了：

这时尝试给Text一个最大宽度，没有任何变化：

return ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 150),
  child: Text(...),
)

接着尝试给Text一个固定宽度，此时终于能正常一行展示了：

return Container(
  width: 150,
  child: Text(...),
);

但这不符合设计，Text后面紧挨着一个小问号，要求Text是自适应宽度的，因此要给Text一个实际宽度才行，但仅算出来的宽度还不行，要多加一点宽度才可以：

final painter = TextPainter(
  textDirection: TextDirection.ltr,
  maxLines: 1,
  text: TextSpan(
    text: ...,
    style: ...,
  ),
);
painter.layout(minWidth: 0, maxWidth: 150);
return Container(
  width: painter.width + 2, // 2就是额外宽度
  child: Text(...),
);

最终效果如图：

定位原因

本以为这个问题算是解决了，在自测时突然发现好几处都有类似问题，比如这个页面圈出来的几处泰文，如果限制了最大行数会表现为提前打点、未限制时会表现为莫名换行，且只有泰文有问题：

这些泰文的相同点是最后一个字符都包含 -์，为验证的确是该符号引起，做了如下测试：

那是否只有-์符号会导致错误呢？wiki-泰文字一文了解在泰文共包含这些字母：

其中，红框圈出的被称为组合符号（Combining Character），即可以加在前一个字母之上：

经过测试，这16个组合符号中有4个会导致显示异常（前四个）：

其实也不难猜到，因为这4个符号明显超出底部辅音字母宽度，且超出部分能在后一个辅音字母的空间中显示。因此，如果它们不在最后一个，实际宽度就等于测量宽度（辅音字母宽度之和）；如果处于最后一个，实际宽度就大于测量宽度，导致换行或打点。

解决办法

这里提供几种解决思路：
1、直接修改翻译，或在文本后加一个空格即可，可以快速修复线上问题
2、优化Text组件，兼容泰文这几个特殊符号处于最后一个的情况
3、设置字体，如Google提供的这一款泰文字体 Google Fonts-Noto Serif Thai 可以调整组合字符的显示区域，使之不超出辅音字母。

总结

突然发现最近三篇BUG系列都是多语言问题，在解决问题过程中也学习各个地区语言的与众不同，也是很有意思的经历了~