詳解Flutter如何獲取Text截斷后的字符串

更新時間：2023年06月12日 08:19:50 作者：老李code

當(dāng)Text文本設(shè)置maxLins屬性將文本強(qiáng)制截斷之后，Text的承載字符串是截斷前，還是截斷后的呢，我們又該如何獲取截斷后的字符串呢，下面就來和大家詳細(xì)講講

問題

當(dāng)Text文本設(shè)置maxLins屬性將文本強(qiáng)制截斷之后，Text的承載字符串是截斷前？還是截斷后的呢？我們該如何獲取截斷后的字符串呢？

答案是：截斷前,截斷字符串的操作并不會改變Text的真實文本內(nèi)容屬性，無論原生還是Flutter 截斷字符串的操作只是對TextUI組件的繪制區(qū)域施加一個限制。

那么我們需要從源碼里看下當(dāng)我們設(shè)置了maxLine這個屬性以后，文本Text究竟是如何截斷顯示的, 跟隨著源碼一探究竟。

首先看到Text只是一個簡單的靜態(tài)組件StatelessWidget

從build方法中可以看到返回的是一個RichText，并將maxLines參數(shù)進(jìn)行傳遞。

接著往下看RichText，可以看到RichText繼承了MultiChildRenderObjectWidget多子渲染W(wǎng)idget，一定有創(chuàng)建渲染對象的地方。

通過createRenderObject對象返回 RenderParagraph對象，并將maxLine參數(shù)繼續(xù)傳遞

點(diǎn)進(jìn)去看一看，記住這個渲染對象

通過構(gòu)造方法將參數(shù)傳遞給自身維護(hù)的私有成員變量 TextPainter,這個對象是Flutter的文本繪制器，通過它來處理文本的布局與繪制，那繼續(xù)點(diǎn)進(jìn)去看一看。

最終在布局和繪制方法時會觸發(fā)_createParagraphStyle方法，返回ParagraphStyle對象，這里的觸發(fā)時機(jī)就是上面渲染對象布局繪制時調(diào)用的，所以也可以理解TextPainter就是Flutter框架渲染文本處理的封裝對象。

這個對象主要用來確定文本的段落樣式，而maxLines截取操作只會影響段落的顯示，并不會影響文本本身的樣式，這里判斷了是否設(shè)置了文本TextStyle樣式。如果沒有設(shè)置使用默認(rèn)的樣式。點(diǎn)進(jìn)去看一看

最終通過構(gòu)造方法觸發(fā)_encodeParagraphStyle方法，文本屬性會直接通過和c++層交互進(jìn)行保存，TextStyle和StrutStyle樣式的設(shè)置原理也一樣。最后通過渲染對象觸發(fā)layout方法確定文本繪制區(qū)域，也就是說設(shè)置maxLines之后文本內(nèi)容不會改變，但文本的繪制區(qū)域會發(fā)生改變。

解決方案

我們現(xiàn)在知道maxLine本身是針對UI來進(jìn)行截斷的，并不會改變設(shè)置的內(nèi)容屬性，如果想要獲取截斷后的文本數(shù)據(jù)我們該如何操作呢，其實TextPainter給我們提供了一些Api方法，我們可以直接使用。

通過didExceedMaxLines方法我們可以判斷出，該文本是否超過最大行設(shè)置。

通過getPositionForOffset可以返回一個TextPosition對象，里面的offset屬性就是我們需要的截斷后字符串在原始文本當(dāng)中的index索引。

代碼：

class TextUtil {
/// 獲取最大行文字字?jǐn)?shù)
static int calculateTextMaxTextPos(String value, double fontSize,
    {required double fontHeight, required double maxWidth, required EdgeInsetsGeometry padding, int maxLines = 3}) {
  final TextPainter painter = TextPainter(
      locale: WidgetsBinding.instance.window.locale,
      textDirection: TextDirection.ltr,
      maxLines: maxLines,
      strutStyle: StrutStyle(forceStrutHeight: true, fontSize: fontSize, height: fontHeight),
      text: TextSpan(
        text: value,
        style: TextStyle(
          height: fontHeight,
          fontSize: fontSize,
        ),
      ),
      textAlign: TextAlign.center);
  painter.layout(maxWidth: maxWidth - padding.horizontal);
  final didExceedMaxLines = painter.didExceedMaxLines;
  // print('是否超出最大行$didExceedMaxLines');
  if (didExceedMaxLines) {
  final position = painter.getPositionForOffset(Offset(
    painter.width,
    painter.height,
  ));
  return position.offset;
  }
  return 0;
}
}