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

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 简介里面有。

最后编辑于：2019.01.17 20:57:55