Google 前段時(shí)間舉辦了Flutter Live。 嗶哩嗶哩有視頻： https://www.bilibili.com/video/av37844001， 大家也可以在微信公眾號(hào)： 谷歌開發(fā)者。

最近開始學(xué)習(xí)使用flutter。說點(diǎn)鮮閑話，flutter 有點(diǎn)蛋疼的是如何做適配的問題，在Android Native， 使用dp，但是flutter 并沒有這個(gè)概念。

回歸正文，最近有一個(gè)需求，做一個(gè)垂直布局的文字。?。?flutter Text widget 的TextDirection 只有l(wèi)tr 和rtl ， 是的就是Android Native的左右順序布局，為了一些阿拉伯國家，他們文字是從右邊開始寫的。

先看效果：

screenshot.jpeg

原理：
Text 步步相android native , 有canvas，無法重寫控件。所以需要用到 CustomPaint 、 CustomPainter 來自定義控件。

自定義 VerticalText 繼承 CustomPainter，實(shí)現(xiàn)基本原理、：我們將句子拆成一個(gè)一個(gè)的字，每繪制一個(gè)字的時(shí)候就計(jì)算該字繪制的位置， 主要代碼：

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) { // 如果一列不夠一個(gè)文字，就新起一列。 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; } 

就這么簡(jiǎn)單就實(shí)現(xiàn)了。
Github地址： https://github.com/wilin52/vertical_text

歡迎大家提出建議和意見，有問題請(qǐng)聯(lián)系 wilin52@163.com，其他聯(lián)系方式 簡(jiǎn)介以及Github 簡(jiǎn)介里面有。

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/17600.html