flutter|flutter 垂直排版的文字，支持emoji flutter垂直排版的文字，支持

Google 前段时间举办了Flutter Live。哔哩哔哩有视频： https://www.bilibili.com/video/av37844001，大家也可以在微信公众号：谷歌开发者。
最近有一个需求，做一个垂直布局的文字。啊？ flutter Text widget 的TextDirection 只有ltr 和rtl ，是的就是Android Native的左右顺序布局，为了一些阿拉伯国家，他们文字是从右边开始写的。
先看效果：

文章图片
screenshot.jpeg
emoji优化后的效果：

文章图片
WechatIMG2.jpeg 【flutter|flutter 垂直排版的文字，支持emoji】原理：
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 简介里面有。