Flutter：缩放文本时如何避免自动换行并消除Transform.scale副作用

实现方案 #

你可以通过自定义组件同时满足指定比例缩放、无多余边距、文本不换行的需求，核心逻辑是先让子组件在无宽度限制下完成布局得到原始尺寸，再按比例计算组件实际占有的布局尺寸，最后执行缩放，避免Transform的布局顺序问题。

封装通用缩放组件 #

import 'package:flutter/material.dart';

class FixedScaleWidget extends SingleChildRenderObjectWidget {
  final double scale;

  const FixedScaleWidget({
    super.key,
    required this.scale,
    required Widget child,
  }) : super(child: child);

  @override
  RenderObject createRenderObject(BuildContext context) {
    return _RenderFixedScaleWidget(scale: scale);
  }

  @override
  void updateRenderObject(BuildContext context, _RenderFixedScaleWidget renderObject) {
    renderObject.scale = scale;
  }
}

class _RenderFixedScaleWidget extends RenderProxyBox {
  double _scale;

  _RenderFixedScaleWidget({required double scale}) : _scale = scale;

  double get scale => _scale;

  set scale(double value) {
    if (_scale == value) return;
    _scale = value;
    markNeedsLayout();
  }

  @override
  void performLayout() {
    // 让子组件在无约束的环境下布局，不会因为父级宽度限制换行
    child?.layout(const BoxConstraints(), parentUsesSize: true);
    final childSize = child?.size ?? Size.zero;
    // 按缩放比例计算当前组件实际占有的布局尺寸，解决phantom边距问题
    size = Size(childSize.width * scale, childSize.height * scale);
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    // 对画布做缩放，实现子组件的比例缩放
    context.pushTransform(
      needsCompositing,
      offset,
      Matrix4.diagonal3Values(scale, scale, 1),
      (context, offset) => super.paint(context, offset),
    );
  }
}

使用方法 #

直接包裹你现有的组件即可，不需要提前设置宽高，scale参数填你需要的缩放比例：

FixedScaleWidget(
  scale: 0.5,
  child: HtmlWidget('<font size="200">Some Long Sentence Alright</font>'),
)

也兼容普通Text组件：

FixedScaleWidget(
  scale: 0.5,
  child: Text('Some Long Sentence Alright', style: TextStyle(fontSize: 200)),
)

原理解释 #

• 布局阶段先让子组件在无约束条件下计算尺寸，长文本会按一行展示不会触发换行，和FittedBox效果一致
• 组件自身的布局尺寸直接按子组件原始尺寸*缩放比例返回，不会出现Transform.scale的多余空白边距问题
• 绘制阶段对画布做缩放，完全符合指定比例缩放的需求

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