如何让Flutter的Wrap组件子项填充可用空间？

方法1：使用AutoSizeText组件 #

这是最简便的实现方式，借助第三方库auto_size_text自动调整字体大小，确保文本在容器可用空间内完整显示，不会溢出。

步骤： #

1. 在pubspec.yaml中添加依赖：

dependencies:
  auto_size_text: ^3.0.0 # 请使用最新版本

2. 替换原有Text组件为AutoSizeText，配置关键参数：

Container(
  decoration: BoxDecoration(
    color: containerColor,
    border: Border.all(color: borderColor),
    borderRadius: const BorderRadius.all(Radius.circular(10))
  ),
  padding: const EdgeInsets.all(8),
  // 给容器设置最小宽度，避免短文本时容器过窄
  constraints: const BoxConstraints(minWidth: 60),
  child: AutoSizeText(
    "dynamic text",
    style: TextStyle(color: textColor),
    maxLines: 1, // 可根据需求设置多行
    minFontSize: 12, // 限制最小字体大小
    overflow: TextOverflow.ellipsis, // 极端情况显示省略号
  ),
)

AutoSizeText会自动计算文本长度，动态调整字体大小以适配容器宽度，同时保留文本排版样式。

方法2：使用原生FittedBox组件 #

如果不想引入第三方库，可使用Flutter原生的FittedBox，通过缩放文本适配容器空间。注意：此方式是整体缩放文本，而非单独调整字体大小，适合允许缩放且要求文本完整显示的场景。

代码示例： #

Container(
  decoration: BoxDecoration(
    color: containerColor,
    border: Border.all(color: borderColor),
    borderRadius: const BorderRadius.all(Radius.circular(10))
  ),
  padding: const EdgeInsets.all(8),
  constraints: const BoxConstraints(minWidth: 60),
  child: FittedBox(
    fit: BoxFit.scaleDown, // 仅在文本超出时缩小，不放大短文本
    alignment: Alignment.center,
    child: Text(
      "dynamic text",
      style: TextStyle(color: textColor),
    ),
  ),
)

方法3：自定义计算字体大小（进阶） #

若需要更精细的控制逻辑，可通过TextPainter预计算文本宽度，手动调整字体大小。

自定义组件实现： #

class AutoSizeTextWidget extends StatefulWidget {
  final String text;
  final TextStyle style;
  final double maxWidth;

  const AutoSizeTextWidget({
    super.key,
    required this.text,
    required this.style,
    required this.maxWidth,
  });

  @override
  State<AutoSizeTextWidget> createState() => _AutoSizeTextWidgetState();
}

class _AutoSizeTextWidgetState extends State<AutoSizeTextWidget> {
  late double _fontSize;

  @override
  void initState() {
    super.initState();
    _fontSize = widget.style.fontSize ?? 14;
    _calculateFontSize();
  }

  void _calculateFontSize() {
    final textPainter = TextPainter(
      text: TextSpan(text: widget.text, style: widget.style),
      maxLines: 1,
      textDirection: TextDirection.ltr,
    )..layout(maxWidth: widget.maxWidth);

    // 文本超出宽度时，逐步减小字体大小
    while (textPainter.width > widget.maxWidth && _fontSize > 10) {
      _fontSize -= 1;
      textPainter.text = TextSpan(
        text: widget.text,
        style: widget.style.copyWith(fontSize: _fontSize),
      );
      textPainter.layout(maxWidth: widget.maxWidth);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      widget.text,
      style: widget.style.copyWith(fontSize: _fontSize),
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    );
  }
}

使用自定义组件： #

Container(
  decoration: BoxDecoration(
    color: containerColor,
    border: Border.all(color: borderColor),
    borderRadius: const BorderRadius.all(Radius.circular(10))
  ),
  padding: const EdgeInsets.all(8),
  constraints: const BoxConstraints(minWidth: 60, maxWidth: 200),
  child: AutoSizeTextWidget(
    text: "dynamic text",
    style: TextStyle(color: textColor),
    maxWidth: 200 - 16, // 减去左右padding总和（8*2）
  ),
)

关键注意事项 #

• 不要用Expanded包裹Wrap的子项：Wrap是流式布局，子项尺寸由自身内容决定，Expanded仅适用于Row/Column等Flex布局，对Wrap无效。
• 给Container设置constraints：通过minWidth和maxWidth限制容器范围，避免文本过短/过长时容器尺寸异常。

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