Flutter：如何使两个Text Widget尺寸一致（文本、字号不同且FittedBox无效）

方案一：利用IntrinsicWidth + IntrinsicHeight（无状态实现，简单快捷） #

这种方法会让两个Text自动取彼此之间最大的宽高作为共同尺寸，无需额外状态管理，适合大多数场景：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    IntrinsicWidth(
      child: IntrinsicHeight(
        child: Column(
          children: [
            // 第一个Text，内容短、字号小
            Container(
              alignment: Alignment.center,
              color: Colors.grey[200],
              child: Text("Hi", style: TextStyle(fontSize: 16)),
            ),
            SizedBox(height: 8),
            // 第二个Text，内容长、字号大
            Container(
              alignment: Alignment.center,
              color: Colors.grey[200],
              child: Text("Hello World!", style: TextStyle(fontSize: 24)),
            ),
          ],
        ),
      ),
    ),
  ],
)

如果是横向排列两个Text，把Column换成Row即可。IntrinsicWidth会强制所有子组件宽度一致（取最大宽度），IntrinsicHeight则处理高度，配合Container的alignment可以让文本在固定尺寸内居中显示。

方案二：手动测量尺寸并复用（精确控制，适合复杂场景） #

如果需要更精准的控制（比如固定以某一个Text的尺寸为准，而非取最大值），可以用TextPainter测量目标Text的尺寸，再用SizedBox把尺寸套给另一个Text：

class EqualSizeTextPair extends StatefulWidget {
  final String fixedText;
  final TextStyle fixedStyle;
  final String targetText;
  final TextStyle targetStyle;

  const EqualSizeTextPair({
    super.key,
    required this.fixedText,
    required this.fixedStyle,
    required this.targetText,
    required this.targetStyle,
  });

  @override
  State<EqualSizeTextPair> createState() => _EqualSizeTextPairState();
}

class _EqualSizeTextPairState extends State<EqualSizeTextPair> {
  Size? _fixedTextSize;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // 先测量基准Text的尺寸
        LayoutBuilder(
          builder: (context, constraints) {
            if (_fixedTextSize == null) {
              final painter = TextPainter(
                text: TextSpan(text: widget.fixedText, style: widget.fixedStyle),
                textDirection: TextDirection.ltr,
                maxLines: 1, // 根据需求调整行数
              )..layout(maxWidth: constraints.maxWidth);
              setState(() => _fixedTextSize = painter.size);
            }
            return SizedBox.fromSize(
              size: _fixedTextSize,
              child: Text(widget.fixedText, style: widget.fixedStyle),
            );
          },
        ),
        SizedBox(width: 16),
        // 复用基准尺寸给目标Text
        if (_fixedTextSize != null)
          SizedBox.fromSize(
            size: _fixedTextSize,
            child: Text(
              widget.targetText,
              style: widget.targetStyle,
              overflow: TextOverflow.ellipsis, // 内容超出时的处理方式
              textAlign: TextAlign.center,
            ),
          ),
      ],
    );
  }
}

使用时直接传入两个文本和对应的样式即可，这种方式可以指定以其中一个Text的尺寸为标准，适合需要严格对齐的场景。

为什么FittedBox没达到效果？ #

FittedBox的作用是缩放文本以适应父容器的尺寸，而不是让两个文本的容器尺寸一致。如果之前用FittedBox时没给父容器固定尺寸，它只会根据文本自身大小缩放，自然无法让两个Text保持同尺寸。

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