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://www.junxiaosheng.cn/17600.html