<address id="r9vd9"><address id="r9vd9"><listing id="r9vd9"></listing></address></address>

      歡迎您光臨深圳塔燈網絡科技有限公司!
      電話圖標 余先生:13699882642

      網站百科

      為您解碼網站建設的點點滴滴

      flutter 垂直排版的文字

      發表日期: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的左右順序布局,為了一些阿拉伯國家,他們文字是從右邊開始寫的。

      先看效果:


      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.webpost.com.cn/17600.html
      相關APP開發
       八年  行業經驗

      多一份參考,總有益處

      聯系深圳網站公司塔燈網絡,免費獲得網站建設方案及報價

      咨詢相關問題或預約面談,可以通過以下方式與我們聯系

      業務熱線:余經理:13699882642

      Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.    

      国产成人精品综合在线观看