Flutter布局问题：点击扩展容器时如何让同行容器自动换行

问题场景 #

我创建了一个可通过onTap参数改变宽度的MyContainer组件，将两个该组件放置在Row中：

• 未点击容器时布局符合预期（image1）
• 点击其中一个容器使其宽度扩展后，会超出布局范围（image2）
• 期望效果：容器扩展时，另一个容器自动移至其下方（image3）

尝试过ListView和GridView，均未达到预期效果。

相关代码片段：

// ...
body: SingleChildScrollView(
  child: Padding(
    padding: const EdgeInsets.all(8),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(
          height: 18,
        ),
        const HeroInfo(),
        const SizedBox(
          height: 18,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [                       
            MyContainer(),
            MyContainer(),
          ],
        ),
// ...

解决方案 #

用Wrap组件替换Row即可实现自动换行效果。Row强制子组件在同一行布局，不会根据子组件尺寸变化自动换行；而Wrap会在子组件超出当前行可用空间时，自动将后续子组件移至下一行。

修改后的代码片段：

// ...
body: SingleChildScrollView(
  child: Padding(
    padding: const EdgeInsets.all(8),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(
          height: 18,
        ),
        const HeroInfo(),
        const SizedBox(
          height: 18,
        ),
        // 替换Row为Wrap
        Wrap(
          spacing: 8, // 子组件之间的水平间距
          runSpacing: 8, // 行与行之间的垂直间距
          alignment: WrapAlignment.spaceBetween, // 保持原来的两端对齐效果
          children: [                       
            MyContainer(),
            MyContainer(),
          ],
        ),
// ...

额外说明 #

• 如果需要更精准控制换行时机，可以在MyContainer的宽度变化逻辑中，结合父容器的可用宽度做判断，但Wrap已经能满足基础的自动换行需求。
• 确保MyContainer的状态管理正确（比如使用StatefulWidget），宽度变化时能触发组件重建，让Wrap重新计算布局。

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