flutter-use-column-row-first

Flutter 优先使用 Column 和 Row

从约束系统出发构建响应式 Flutter 布局。优先采用简单的弹性组合，仅在设计确有具体需求时才引入固定尺寸或叠加布局。

布局工作流

1. 判断每个组的主要布局方式是垂直、水平、重叠、滚动还是换行。
2. 垂直组从 Column 开始，水平组从 Row 开始。
3. 嵌套小型、命名清晰的组件，而不是构建一个深度嵌套的 build 方法。
4. 使用 Expanded、Flexible 和 Spacer 分配有界的可用空间。
5. 有意地添加内边距、对齐方式、宽高比和约束。
6. 测试狭窄和宽阔的约束、文本缩放、键盘显示，以及较长或本地化的内容。

规则

• 垂直流优先使用 Column，水平流优先使用 Row。
• 使用 mainAxisAlignment、crossAxisAlignment 和 mainAxisSize 控制对齐方式。
• 当子项必须填满其分配的主轴剩余空间时，使用 Expanded。
• 当子项可以少用其分配的空间时，使用 Flexible。
• 仅使用 flex 表示按比例分配。flex: 2 的子项获得的可用空间份额是 flex: 1 兄弟项的两倍。
• 使用 Spacer 在兄弟项之间灵活留白。使用 SizedBox 设置有意指定的固定间距。
• 在 Row 中，如果文本或其他宽度可变的内容必须为兄弟项让出空间，请将其包装在 Expanded 或 Flexible 中。
• 当垂直内容可能超出视口时，使用 ListView 或其他可滚动组件；Column 不会滚动。
• 当水平子项应换到下一行，而不是缩小或溢出时，使用 Wrap。
• 当布局组合本身必须随可用空间变化时，使用 LayoutBuilder、断点或自适应组件。
• 当内容必须避开系统遮挡区域时，使用 SafeArea。

避免僵硬布局

不要将以下方式作为默认布局机制：

• 使用硬编码 Positioned 坐标的 Stack
• 使用硬编码屏幕尺寸般宽度或高度的 Container、SizedBox 或 ConstrainedBox
• 用于模拟正常文档流的偏移、变换或外边距
• 从设计稿复制的屏幕尺寸

在这些方式有具体用途时使用，例如：

• 真实的视觉重叠、徽标、浮动控件或锚定装饰
• 触控目标最小尺寸、图标尺寸、缩略图或有界媒体
• 刻意设置的最大阅读宽度
• 宽高比要求
• 平台或设计系统常量

如果用途不明显，请在代码结构中体现，或添加简短注释说明。

约束安全性

• 仅在 Row、Column 或 Flex 下使用 Expanded 和 Flexible。
• 沿无界主轴不要使用非零 flex。在垂直滚动组件中，应移除垂直方向的 Expanded 或 Flexible，或建立有意义的有限约束。
• 如果嵌套的 Column 需要外层 Column 的剩余高度，请将内层 Column 包装在 Expanded 中。
• 诊断溢出时，先检查约束和可变内容，再添加裁剪或更小的硬编码尺寸。
• 对确实超出可用空间的内容，优先使用滚动布局。

推荐模式

Padding(
  padding: const EdgeInsets.all(16),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      const Header(),
      const SizedBox(height: 16),
      Expanded(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Flexible(flex: 2, child: PrimaryContent()),
            const SizedBox(width: 16),
            const Flexible(child: SecondaryContent()),
          ],
        ),
      ),
      const SizedBox(height: 16),
      const Actions(),
    ],
  ),
)

如果水平内容在窄屏上无法保持可用，请在断点处更改此布局组合；不要只是一味挤压内容。

视觉参考

将设计稿拆解为嵌套弹性布局时，请查看以下示意图：

• Pavlova 行列布局展示了整体的水平 Row，其中包含垂直内容 Column 和一张图片。
• 嵌套行列示意图展示了如何将较小的评分组和图标组拆分为嵌套的 Row 和 Column 组件。

将这些示意图作为结构参考，而不是固定像素模板。

验证

• 确认在受支持的视口尺寸下不会出现 RenderFlex 溢出。
• 确认文本会按预期换行或截断。
• 确认弹性子项受到有界约束。
• 确认可滚动内容始终可访问。
• 确认固定尺寸以及 Stack 或 Positioned 的用法有明确的设计理由。

来源

• Flutter 布局指南
• Column API
• Expanded API
• Flexible.flex API