發表日期:2018-12 文章編輯:小燈 瀏覽次數:6540
Google 前段時間舉辦了Flutter Live。 嗶哩嗶哩有視頻: https://www.bilibili.com/video/av37844001, 大家也可以在微信公眾號: 谷歌開發者。
最近開始學習使用flutter。說點鮮閑話,flutter 有點蛋疼的是如何做適配的問題,在Android Native, 使用dp,但是flutter 并沒有這個概念。
回歸正文,最近有一個需求,做一個垂直布局的文字。?。?flutter Text widget 的TextDirection 只有ltr 和rtl , 是的就是Android Native的左右順序布局,為了一些阿拉伯國家,他們文字是從右邊開始寫的。
先看效果:
原理:
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 簡介里面有。
日期:2018-10 瀏覽次數:7525
日期:2018-12 瀏覽次數:4598
日期:2018-07 瀏覽次數:5115
日期:2018-12 瀏覽次數:4402
日期:2018-09 瀏覽次數:5756
日期:2018-12 瀏覽次數:10180
日期:2018-11 瀏覽次數:5091
日期:2018-07 瀏覽次數:4845
日期:2018-05 瀏覽次數:5098
日期:2018-12 瀏覽次數:4562
日期:2018-10 瀏覽次數:5377
日期:2018-12 瀏覽次數:6438
日期:2018-11 瀏覽次數:4705
日期:2018-08 瀏覽次數:4850
日期:2018-11 瀏覽次數:12938
日期:2018-09 瀏覽次數:5858
日期:2018-12 瀏覽次數:5084
日期:2018-10 瀏覽次數:4423
日期:2018-11 瀏覽次數:4769
日期:2018-12 瀏覽次數:6299
日期:2018-06 瀏覽次數:4249
日期:2018-08 瀏覽次數:5697
日期:2018-10 瀏覽次數:4681
日期:2018-12 瀏覽次數:4792
日期:2018-07 瀏覽次數:4614
日期:2018-12 瀏覽次數:4783
日期:2018-06 瀏覽次數:4623
日期:2018-11 瀏覽次數:4603
日期:2018-12 瀏覽次數:4525
日期:2018-12 瀏覽次數:5507
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.