Flutter文本放大抖动问题求助：如何实现平滑缩放效果？

核心原因 #

文本跳动本质是字体的排版度量（ascent、descent、baseline等）随字号变化并非完全线性，系统字体在不同字号下的渲染参数是离散优化的，直接调整字号或缩放会导致基线位置突变。

可行解决方案 #

1. 固定文本布局锚点，用Transform缩放而非修改字号

固定文本的基础字号，通过Transform.translate配合Transform.scale，将缩放锚点固定在文本的基线位置，抵消缩放带来的基线偏移：

class _MyHomePageState extends State<MyHomePage> {
  late Timer timer;
  double _scale = 1.0;
  final double baseFontSize = 50;

  @override
  void initState() {
    super.initState();
    Timer.periodic(const Duration(milliseconds: 33), (Timer t) {
      if (_scale <= 2.0) {
        setState(() {
          _scale += 0.0067;
        });
      } else {
        _scale = 1.0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppBar(title: Text('Smooth Scaling Text')),
      body: Center(
        child: Builder(
          builder: (context) {
            final textPainter = TextPainter(
              text: TextSpan(
                text: 'shakes as it grows',
                style: TextStyle(fontSize: baseFontSize),
              ),
              textDirection: TextDirection.ltr,
            )..layout();
            final baselineOffset = textPainter.baseLine;
            
            return Transform(
              transform: Matrix4.identity()
                ..translate(0.0, baselineOffset * (1 - _scale))
                ..scale(_scale),
              origin: Offset(0, baselineOffset),
              child: Text(
                'shakes as it grows',
                style: TextStyle(fontSize: baseFontSize),
              ),
            );
          },
        ),
      ),
    );
  }
}

2. 自定义文本渲染，强制线性化字体度量

通过TextPainter手动控制文本排版，忽略系统字体的离散度量，用线性计算的方式固定基线位置：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: const AppBar(title: Text('Linear Metric Text')),
    body: Center(
      child: CustomPaint(
        painter: _ScalingTextPainter(
          text: 'shakes as it grows',
          scale: _scale,
          baseFontSize: 50,
        ),
      ),
    ),
  );
}

class _ScalingTextPainter extends CustomPainter {
  final String text;
  final double scale;
  final double baseFontSize;

  _ScalingTextPainter({required this.text, required this.scale, required this.baseFontSize});

  @override
  void paint(Canvas canvas, Size size) {
    final textStyle = TextStyle(fontSize: baseFontSize * scale);
    final textSpan = TextSpan(text: text, style: textStyle);
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    )..layout();

    final baseBaseline = baseFontSize * 0.8;
    final scaledBaseline = baseBaseline * scale;
    
    final x = (size.width - textPainter.width) / 2;
    final y = (size.height / 2) + scaledBaseline - (baseFontSize * scale * 0.8);
    
    textPainter.paint(canvas, Offset(x, y));
  }

  @override
  bool shouldRepaint(_ScalingTextPainter oldDelegate) {
    return oldDelegate.scale != scale;
  }
}

3. 使用固定度量字体

选择在不同字号下排版度量（ascent/descent比例）保持恒定的字体，比如部分等宽字体或专门设计的无衬线字体，这类字体的基线位置随字号线性变化，缩放时不会出现跳动。

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