SwiftUI：计算可显示字符数实现提供商列表多行截断

要实现3行内放不下就截断并显示“+ X others”的效果，核心是通过文本测量工具计算每行可容纳的内容（而非按字符数硬算，毕竟不同字符、字体的宽度差异极大）。以下是具体实现步骤（以Flutter为例）：

核心思路 #

1. 用TextPainter测量每个文本片段的实际宽度和行高，它能精准匹配不同字体、字号下的文本尺寸。
2. 结合GeometryReader获取视图的可用宽度，逐行累加提供商名称（带分隔符），直到第3行无法容纳新内容。
3. 计算剩余未显示的提供商数量，生成“+ X others”文本，并调整第3行内容确保整体不超出宽度限制。

具体代码实现 #

第一步：实现截断逻辑方法 #

String truncateProviders(List<String> providers, double maxWidth, TextStyle textStyle, int maxLines = 3) {
  if (providers.isEmpty) return '';
  
  final textPainter = TextPainter(textDirection: TextDirection.ltr);
  
  // 计算单行文本高度（用于判断总行数）
  textPainter.text = TextSpan(text: '占位文本', style: textStyle);
  textPainter.layout();
  final lineHeight = textPainter.size.height;

  List<String> displayedItems = [];
  double currentLineWidth = 0;
  int currentLine = 1;

  for (int i = 0; i < providers.length; i++) {
    final provider = providers[i];
    // 每个名称后加分隔符（最后一个不加）
    final textSegment = '$provider${i == providers.length - 1 ? '' : ', '}';
    
    // 测量当前文本片段的宽度
    textPainter.text = TextSpan(text: textSegment, style: textStyle);
    textPainter.layout();
    final segmentWidth = textPainter.size.width;

    // 当前行能放下，直接累加
    if (currentLineWidth + segmentWidth <= maxWidth) {
      currentLineWidth += segmentWidth;
      displayedItems.add(provider);
    } else {
      // 当前行放不下，判断是否还有剩余行数
      if (currentLine < maxLines) {
        currentLine++;
        currentLineWidth = segmentWidth;
        displayedItems.add(provider);
      } else {
        // 第3行放不下，计算剩余数量并生成后缀文本
        final remainingCount = providers.length - i;
        final suffixText = ' + $remainingCount others';
        
        // 测量后缀文本的宽度
        textPainter.text = TextSpan(text: suffixText, style: textStyle);
        textPainter.layout();
        final suffixWidth = textPainter.size.width;

        // 调整第3行内容，确保加上后缀后不超宽
        while (currentLineWidth + segmentWidth + suffixWidth > maxWidth && displayedItems.isNotEmpty) {
          final removedItem = displayedItems.removeLast();
          final removedSegment = '$removedItem, ';
          textPainter.text = TextSpan(text: removedSegment, style: textStyle);
          textPainter.layout();
          currentLineWidth -= textPainter.size.width;
          i--; // 把移除的元素重新加入循环判断
        }

        displayedItems.add(suffixText);
        break;
      }
    }
  }

  return displayedItems.join(', ');
}

第二步：在视图中使用 #

结合GeometryReader获取可用宽度，调用上述方法处理列表后，用Text组件展示：

GeometryReader(
  builder: (context) {
    final availableWidth = context.size!.width;
    // 示例提供商列表
    final providers = [
      'Cloudflare', 'AWS', 'Google Cloud', 'Azure', 'Oracle Cloud',
      'DigitalOcean', 'Linode', 'Vultr'
    ];
    final processedText = truncateProviders(
      providers,
      availableWidth,
      TextStyle(fontSize: 14, color: Colors.black),
    );

    return Text(
      processedText,
      maxLines: 3,
      style: TextStyle(fontSize: 14, color: Colors.black),
    );
  },
)

注意事项 #

• 样式一致性：truncateProviders方法中传入的textStyle必须和最终显示Text组件的样式完全一致，否则测量宽度会有偏差。
• 边界情况处理：要考虑空列表、所有内容能在3行内放下的情况，避免出现逻辑错误。
• 多语言适配：如果涉及多语言（比如阿拉伯语），要将textDirection设置为TextDirection.rtl。

内容的提问来源于stack exchange，提问作者Atlantis