如何让Flutter StrokeText组件适配TextOverflow，避免描边截断？

问题原因 #

你当前通过叠加两个独立Text组件实现描边的方式，会导致两个组件各自独立计算文本溢出逻辑。主文本（填充色）能正确截断并显示省略号，但描边文本（下层）因布局约束未与主文本完全同步，或是描边样式导致文本宽度计算差异，最终出现描边部分截断或与主文本截断位置不一致的视觉问题。

解决方案：使用CustomPaint统一绘制描边与文本 #

通过CustomPaint结合TextPainter，让描边和主文本共享同一套布局与溢出配置，确保两者的截断状态完全一致。

实现代码 #

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class StrokeText extends StatelessWidget {
  final String text;
  final TextStyle style;
  final Color strokeColor;
  final double strokeWidth;
  final TextAlign textAlign;
  final TextOverflow overflow;
  final int? maxLines;

  const StrokeText({
    super.key,
    required this.text,
    required this.style,
    required this.strokeColor,
    required this.strokeWidth,
    this.textAlign = TextAlign.start,
    this.overflow = TextOverflow.clip,
    this.maxLines,
  });

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _StrokeTextPainter(
        text: text,
        baseStyle: style,
        strokeColor: strokeColor,
        strokeWidth: strokeWidth,
        textAlign: textAlign,
        overflow: overflow,
        maxLines: maxLines,
      ),
      child: SizedBox(
        width: double.infinity,
        height: double.infinity,
      ),
    );
  }
}

class _StrokeTextPainter extends CustomPainter {
  final String text;
  final TextStyle baseStyle;
  final Color strokeColor;
  final double strokeWidth;
  final TextAlign textAlign;
  final TextOverflow overflow;
  final int? maxLines;

  _StrokeTextPainter({
    required this.text,
    required this.baseStyle,
    required this.strokeColor,
    required this.strokeWidth,
    required this.textAlign,
    required this.overflow,
    this.maxLines,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // 配置描边样式
    final strokePaint = Paint()
      ..style = PaintingStyle.stroke
      ..color = strokeColor
      ..strokeWidth = strokeWidth
      ..strokeJoin = StrokeJoin.round;

    // 配置填充样式
    final fillPaint = Paint()..style = PaintingStyle.fill;

    // 构建描边文本的TextSpan
    final strokeSpan = TextSpan(
      text: text,
      style: baseStyle.copyWith(foreground: strokePaint),
    );

    // 构建填充文本的TextSpan
    final fillSpan = TextSpan(
      text: text,
      style: baseStyle.copyWith(foreground: fillPaint),
    );

    // 初始化TextPainter，统一配置溢出与行数
    final textPainter = TextPainter(
      textAlign: textAlign,
      textDirection: TextDirection.ltr,
      maxLines: maxLines,
      ellipsis: overflow == TextOverflow.ellipsis ? '...' : null,
    );

    // 先绘制描边文本
    textPainter.text = strokeSpan;
    textPainter.layout(maxWidth: size.width);
    final offset = _getTextOffset(textPainter, size);
    textPainter.paint(canvas, offset);

    // 再绘制填充文本（覆盖在描边上）
    textPainter.text = fillSpan;
    textPainter.layout(maxWidth: size.width);
    textPainter.paint(canvas, offset);
  }

  // 根据文本对齐方式计算绘制偏移
  Offset _getTextOffset(TextPainter painter, Size size) {
    switch (textAlign) {
      case TextAlign.left:
        return Offset(0, (size.height - painter.height) / 2);
      case TextAlign.center:
        return Offset((size.width - painter.width) / 2, (size.height - painter.height) / 2);
      case TextAlign.right:
        return Offset(size.width - painter.width, (size.height - painter.height) / 2);
      default:
        return Offset(0, (size.height - painter.height) / 2);
    }
  }

  @override
  bool shouldRepaint(covariant _StrokeTextPainter oldDelegate) {
    return oldDelegate.text != text ||
        oldDelegate.baseStyle != baseStyle ||
        oldDelegate.strokeColor != strokeColor ||
        oldDelegate.strokeWidth != strokeWidth ||
        oldDelegate.textAlign != textAlign ||
        oldDelegate.overflow != overflow ||
        oldDelegate.maxLines != maxLines;
  }
}

使用示例 #

StrokeText(
  text: '这是一段很长的测试文本，用于验证溢出时描边是否正常显示',
  style: TextStyle(
    fontSize: 16,
    color: Colors.white,
  ),
  strokeColor: Colors.black,
  strokeWidth: 2,
  overflow: TextOverflow.ellipsis,
  maxLines: 1,
)

备选方案：优化Stack叠加方案 #

如果坚持使用Stack叠加Text组件，需确保两个组件的所有布局参数完全一致，并通过Align强制对齐，避免布局偏移：

class StrokeText extends StatelessWidget {
  final String text;
  final TextStyle style;
  final Color strokeColor;
  final double strokeWidth;
  final TextAlign textAlign;
  final TextOverflow overflow;
  final int? maxLines;

  const StrokeText({
    super.key,
    required this.text,
    required this.style,
    required this.strokeColor,
    required this.strokeWidth,
    this.textAlign = TextAlign.start,
    this.overflow = TextOverflow.clip,
    this.maxLines,
  });

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: _getAlign(textAlign),
      child: Stack(
        children: [
          Text(
            text,
            style: style.copyWith(
              foreground: Paint()
                ..style = PaintingStyle.stroke
                ..color = strokeColor
                ..strokeWidth = strokeWidth
                ..strokeJoin = StrokeJoin.round,
            ),
            textAlign: textAlign,
            overflow: overflow,
            maxLines: maxLines,
            softWrap: true,
          ),
          Text(
            text,
            style: style,
            textAlign: textAlign,
            overflow: overflow,
            maxLines: maxLines,
            softWrap: true,
          ),
        ],
      ),
    );
  }

  Alignment _getAlign(TextAlign textAlign) {
    switch (textAlign) {
      case TextAlign.left:
        return Alignment.centerLeft;
      case TextAlign.center:
        return Alignment.center;
      case TextAlign.right:
        return Alignment.centerRight;
      default:
        return Alignment.centerLeft;
    }
  }
}

方案对比 #

• CustomPaint方案：最可靠，描边与主文本共享同一布局计算，完全避免溢出截断不一致问题，适合复杂场景。
• Stack优化方案：实现简单，但受限于两个Text组件的独立渲染，极端情况下仍可能出现细微偏移，适合简单场景。

内容的提问来源于stack exchange，提问作者anonymous-dev