Flutter中Wrap组件内文本适配全屏与最小宽度问题求助

要同时适配全屏和最小宽度场景，你可以通过以下调整实现预期布局：

核心问题分析 #

• 使用内层Wrap时，全屏布局正常，但窄屏时出现报错，原因是SingleChildScrollView未被正确约束垂直空间，导致内容换行后垂直溢出。
• 使用内层Row时，窄屏布局正常，但全屏时不符合预期，因为Row强制子元素保持在同一行，无法根据可用宽度自动换行，且子元素间缺少合理间距。

修正后的代码 #

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      // 添加Expanded让SingleChildScrollView占据剩余垂直空间，避免垂直溢出
      Expanded(
        child: SingleChildScrollView(
          child: Column(
            children: [
              resumoConteudoQuebrado(),
              // 其他内容...
            ],
          ),
        ),
      ),
    ],
  );
}

Column resumoConteudoQuebrado() {
  return Column(
    children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        // 用单个Wrap包裹两个文本，自动适配换行
        child: Wrap(
          spacing: 16.0, // 文本间添加间距，优化全屏布局
          children: [
            Text(
              "Perguntas respondidas: ${questionario.getPerguntasRespondidas()}/${questionario.getTotalPerguntas()}",
            ),
            Text(
              "Pontuação ${questionario.getPontuacaoTotal()} - ${questionario.getAvaliacao()}",
            ),
          ],
        ),
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          butaoSubmeter(),
        ],
      ),
      const SizedBox(height: 10),
    ],
  );
}

关键调整说明 #

1. 移除冗余嵌套：去掉外层不必要的Wrap，直接用单个Wrap包裹两个文本组件，实现自动换行逻辑。
2. 添加垂直约束：用Expanded包裹SingleChildScrollView，确保其占据父组件剩余垂直空间，避免内容换行后出现垂直溢出错误。
3. 优化间距：通过Wrap的spacing属性为文本添加水平间距，提升全屏布局的视觉效果。

这样调整后，布局会在全屏时将两个文本并排显示，在窄屏时自动换行，同时避免溢出报错，完美适配移动端和Windows端。

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