Google 前段时间举办了Flutter Live。 哔哩哔哩有视频： https://www.bilibili.com/video/av37844001， 大家也可以在微信公众号： 谷歌开发者。

最近开始学习使用flutter。说点鲜闲话，flutter 有点蛋疼的是如何做适配的问题，在Android Native， 使用dp，但是flutter 并没有这个概念。

回归正文，最近有一个需求，做一个垂直布局的文字。啊？ flutter Text widget 的TextDirection 只有ltr 和rtl ， 是的就是Android Native的左右顺序布局，为了一些阿拉伯国家，他们文字是从右边开始写的。

先看效果：

screenshot.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; } 

就这么简单就实现了。
Github地址： https://github.com/wilin52/vertical_text

欢迎大家提出建议和意见，有问题请联系 wilin52@163.com，其他联系方式 简介以及Github 简介里面有。

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/17600.html