Flutter中Text组件foreground属性iOS端不显示问题求助

我用Stack嵌套两个Text组件实现带红色描边的黑色文字，Android上能正常显示红色描边+黑色文字，但iOS端只显示黑色文字，红色描边完全被覆盖。排查后怀疑是Impeller（iOS默认渲染引擎）和Skia（Android默认渲染引擎）的渲染差异导致的，当前使用Flutter 3.10.5稳定版。

可行解决方案 #

方案1：合并为单个Text组件（推荐） #

不需要用Stack嵌套两个Text，直接在单个Text的样式里同时设置填充色和描边，避免层级渲染的跨平台差异：

LayoutBuilder(
  builder: (_, constraints) => Container(
    width: constraints.maxHeight,
    decoration: BoxDecoration(
      border: Border.all(width: 1),
      color: Colors.yellow,
    ),
    child: Center(
      child: Text(
        'HI',
        style: TextStyle(
          fontSize: scaleAdapter(50),
          fontWeight: FontWeight.bold,
          color: Colors.black, // 文字填充色
          foreground: Paint()
            ..style = PaintingStyle.stroke
            ..color = Colors.red
            ..strokeWidth = 5, // 描边设置
        ),
      ),
    ),
  ),
);

方案2：用CustomPaint自定义绘制 #

如果方案1不生效，直接用CustomPaint控制绘制顺序，先画描边再画填充文字，彻底避免渲染引擎的差异问题：

LayoutBuilder(
  builder: (_, constraints) => Container(
    width: constraints.maxHeight,
    decoration: BoxDecoration(
      border: Border.all(width: 1),
      color: Colors.yellow,
    ),
    child: Center(
      child: CustomPaint(
        painter: TextStrokePainter(
          text: 'HI',
          textSize: scaleAdapter(50),
          strokeColor: Colors.red,
          fillColor: Colors.black,
          strokeWidth: 5,
        ),
      ),
    ),
  ),
);

// 自定义绘制器
class TextStrokePainter extends CustomPainter {
  final String text;
  final double textSize;
  final Color strokeColor;
  final Color fillColor;
  final double strokeWidth;

  TextStrokePainter({
    required this.text,
    required this.textSize,
    required this.strokeColor,
    required this.fillColor,
    required this.strokeWidth,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final textStyle = TextStyle(
      fontSize: textSize,
      fontWeight: FontWeight.bold,
    );
    final textSpan = TextSpan(text: text, style: textStyle);
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    );
    textPainter.layout(minWidth: 0, maxWidth: size.width);
    final offset = Offset(
      (size.width - textPainter.width) / 2,
      (size.height - textPainter.height) / 2,
    );

    // 先绘制描边
    final strokePaint = Paint()
      ..color = strokeColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth;
    textPainter.paint(canvas, offset, paint: strokePaint);

    // 再绘制填充文字
    final fillPaint = Paint()..color = fillColor;
    textPainter.paint(canvas, offset, paint: fillPaint);
  }

  @override
  bool shouldRepaint(covariant TextStrokePainter oldDelegate) {
    return text != oldDelegate.text ||
        textSize != oldDelegate.textSize ||
        strokeColor != oldDelegate.strokeColor ||
        fillColor != oldDelegate.fillColor ||
        strokeWidth != oldDelegate.strokeWidth;
  }
}

方案3：临时禁用Impeller（不推荐） #

如果只是临时验证问题，可以在iOS的Info.plist中添加配置禁用Impeller，强制使用Skia渲染：

<key>FLTEnableImpeller</key>
<false/>

注：Impeller是官方主推的iOS渲染引擎，长期禁用会影响性能和后续新特性支持，仅作临时排查用。

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