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

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

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

問題

當Text文本設置maxLins屬性將文本強制截斷之后，Text的承載字符串是截斷前？還是截斷后的呢？我們該如何獲取截斷后的字符串呢？

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

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

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

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

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

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

點進去看一看，記住這個渲染對象

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

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

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

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

解決方案

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

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

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

代碼：

class TextUtil {
/// 獲取最大行文字字數(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;
}
}