Flutter中如何在固定尺寸Container内适配最多文本内容

核心思路是通过测量文本的实际渲染尺寸，用二分法快速找到刚好能适配容器的最大文本长度——因为不同字符（中文、英文、标点）的宽度/高度不一致，固定字符数的截取会有误差，必须基于实际渲染结果判断。

以下是主流平台的实现方案：

Web 前端（JavaScript） #

创建一个和目标容器样式完全一致的隐藏测试元素，通过二分法测试文本长度：

function getMaxTextLength(container, fullText) {
  // 复制目标容器的样式到测试元素
  const testEl = document.createElement('span');
  const containerStyle = getComputedStyle(container);
  testEl.style.cssText = `
    position: absolute;
    visibility: hidden;
    font: ${containerStyle.font};
    width: ${containerStyle.width};
    height: ${containerStyle.height};
    overflow: hidden;
    white-space: ${containerStyle.whiteSpace};
    line-height: ${containerStyle.lineHeight};
    padding: ${containerStyle.padding};
  `;
  document.body.appendChild(testEl);

  let low = 0, high = fullText.length;
  let maxLength = 0;

  // 二分法缩小范围，提升效率
  while (low <= high) {
    const mid = Math.floor((low + high) / 2);
    testEl.textContent = fullText.substring(0, mid);
    const testRect = testEl.getBoundingClientRect();
    const containerRect = container.getBoundingClientRect();

    if (testRect.width <= containerRect.width && testRect.height <= containerRect.height) {
      maxLength = mid;
      low = mid + 1;
    } else {
      high = mid - 1;
    }
  }

  document.body.removeChild(testEl);
  return maxLength;
}

• 单行文本保留white-space: nowrap，多行则去掉该属性，以高度作为判断依据。
• 必须复制容器的所有相关样式（字体、行高、内边距等），否则测量结果会偏差。

Flutter #

使用TextPainter在内存中测量文本尺寸，无需实际渲染：

int getMaxTextLength(String fullText, TextStyle style, Size containerSize) {
  final textPainter = TextPainter(
    textDirection: TextDirection.ltr,
    maxLines: null, // 单行设置为1，多行设为null
  );

  int low = 0, high = fullText.length;
  int maxLength = 0;

  while (low <= high) {
    final mid = (low + high) ~/ 2;
    final testText = fullText.substring(0, mid);
    textPainter.text = TextSpan(text: testText, style: style);
    textPainter.layout(maxWidth: containerSize.width);

    if (textPainter.height <= containerSize.height) {
      maxLength = mid;
      low = mid + 1;
    } else {
      high = mid - 1;
    }
  }

  return maxLength;
}

• 传入的style必须和目标Text组件的样式完全一致，确保测量精准。

Android（Kotlin） #

利用StaticLayout测量多行文本的实际高度：

fun getMaxTextLength(fullText: String, textPaint: Paint, containerWidth: Int, containerHeight: Int): Int {
    var low = 0
    var high = fullText.length
    var maxLength = 0

    while (low <= high) {
        val mid = (low + high) / 2
        val testText = fullText.substring(0, mid)
        val layout = StaticLayout.Builder.obtain(testText, 0, testText.length, textPaint, containerWidth)
            .setAlignment(Layout.Alignment.ALIGN_NORMAL)
            .setLineSpacing(0f, 1f) // 匹配TextView的行间距
            .build()

        if (layout.height <= containerHeight) {
            maxLength = mid
            low = mid + 1
        } else {
            high = mid - 1
        }
    }

    return maxLength
}

• textPaint需要从目标TextView获取（textView.paint），保证样式统一。

关键注意事项 #

• 样式一致性是核心：测试用的文本样式必须和容器内文本的样式完全匹配，包括字体、字号、行高、字间距、内边距等。
• 二分法效率更高：相比逐字符遍历，二分法把时间复杂度从O(n)降到O(log n)，处理长文本时优势明显。
• 两端对齐不影响：即使文本设置了两端对齐，测量逻辑依然有效——对齐只是调整字间距，文本的总尺寸还是由字符数量和基础样式决定。

内容的提问来源于stack exchange，提问作者S.Beigi