Google 前段时间举办了Flutter Live。 哔哩哔哩有视频： https://www.bilibili.com/video/av37844001， 大家也可以在微信公众号： 谷歌开发者。
最近有一个需求，做一个垂直布局的文字。啊？ flutter Text widget 的TextDirection 只有ltr 和rtl ， 是的就是Android Native的左右顺序布局，为了一些阿拉伯国家，他们文字是从右边开始写的。
先看效果：
screenshot.jpeg
emoji优化后的效果：
WechatIMG2.jpeg
原理：
Text 不像android native 有canvas 重写控件。所以需要用到 CustomPaint 、 CustomPainter 来自定义控件。
自定义 VerticalText 继承 CustomPainter，实现基本原理、：我们将句子拆成一个一个的字，每绘制一个字的时候就计算该字绘制的位置， 主要代码：
for (int i = 0; i < text.length; i++) {
TextSpan span = new TextSpan(style: textStyle, text: text[i]);
TextPainter tp = new TextPainter(
text: span,
textAlign: TextAlign.center,
textDirection: TextDirection.ltr);
tp.layout();
if (offsetY + tp.height > height) { // 如果一列不够一个文字，就新起一列。
newLine = true;
offsetY = 0; // 如果是新起一列，y 从0 开始
}
if (newLine) {
offsetX -= maxWidth;
newLine = false;
}
if (offsetX < -maxWidth) {
break; // 如果超出左边边界，不绘制。
}
tp.paint(canvas, new Offset(offsetX, offsetY));
offsetY += tp.height;
}
就这么简单就实现了。
然而，这样是无法支持emoji的。因为在dart里面，String 是UTF-16， 而emoji 是UTF-32. 意味着一个emoji 长度为普通字符的两倍。那么，text[i] 就会将emoji 拆成两部分，TextPainter 没办法渲染。
怎么办呢？查看string.dart 其实是有支持包含UTF-32长度计算的。
例如：
image.png
string.runes 可以更加直观的表示单个文字/字符。通过string.runes 获取到的是codeUnit， 不是字符，需要String(codeUnit) 转一下。
所以我们可以通过以下方式获取独立的字符：
image.png
所以上 main的代码可以改成：
image.png
欢迎大家follow 、 star、fork 我的github。
Github地址： https://github.com/wilin52/vertical_text
欢迎大家提出建议和意见，有问题请联系 wilin52@163.com，其他联系方式简书简介以及Github 简介里面有。
网友评论