Flutter-如何計算文字寬高

場景

在某些業務上，可能咱們須要計算多段文字的高度，達到動態適配ListView高度的目的，知足咱們產品的優（bian）秀（tai）需求。在android原生層你們都知道有各類手段能夠計算文字的寬、高等，例如paint.layout等等手段。但在flutter中，雖然並無直接提供API供開發者使用，但和android原生同樣，只有看下RichText的源碼就能夠發現其中奧妙。

---

源碼分析

RichText分析(Text等文本實現都一致)

1. 文本實現最重要的是RenderParagraph類，官網備註 A render object that displays a paragraph of text，大概意思就是這個類用做文案展現的。再繼續看構造函數發現了咱們很是熟悉的老朋友TextPainter（和Android老朋友是否是也差很少），那麼咱們的TextPainter是否也有layout函數呢？let me see。

    

   layout函數

2. 上面咱們能夠看到，layout函數裏面主要作的事情：1、構建好開發者定義的Text。2、根據開發者傳入的maxWidth作限寬操做。3、把全部參數與計算交給ui.Paragraph（ParagraphXXX開頭都是native C++代碼）C++來作跨平臺處理了。

3. 看下TextPainter的height是怎麼來的？由下圖能夠看出仍是離不開ui.Paragraph變量。因此上面第1、第二步只是把參數告知Paragraph的native層，而後委託flutter engine進行計算。最後咱們flutter經過painter直接訪問Paragraph的各類屬性變量。

    

   畫筆的高度

如何計算文字高度（本文重點）

 

///value: 文本內容；fontSize : 文字的大小；fontWeight：文字權重；maxWidth：文本框的最大寬度；maxLines：文本支持最大多少行  
static double calculateTextHeight(
      String value, fontSize, FontWeight fontWeight, double maxWidth, int maxLines) {
    value = filterText(value);
    TextPainter painter = TextPainter(
        ///AUTO：華爲手機若是不指定locale的時候，該方法算出來的文字高度是比系統計算偏小的。
        locale: Localizations.localeOf(GlobalStatic.context, nullOk: true),
        maxLines: maxLines,
        textDirection: TextDirection.ltr,
        text: TextSpan(
            text: value,
            style: TextStyle(
              fontWeight: fontWeight,
              fontSize: fontSize,
            )));
    painter.layout(maxWidth: maxWidth);
    ///文字的寬度:painter.width
    return painter.height;
  }

---

遇到相關問題

1. 在上面代碼AUTO註解下的locale不傳值時候（locale：當前國家語言），在華爲手機上計算的高度與系統layout後文本佈局的高度不一致，計算的值比文本真實佈局後的文本高度偏小，不一樣華爲機型這個偏小的值還不一致。

    

   機型：華爲 mate 9

2. 爲何不傳遞locale時候會只有對華爲機型有影響呢？這個我暫時還不清楚，可是咱們能從flutter的註解中能夠看出，locale的屬性就是爲了辨別不一樣國家對同個文字展現不一樣而存在的。

    

做者：Magic旭 連接：https://www.jianshu.com/p/f713e5a36da5 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。