Flutter布局问题：如何使容器均匀分布并对齐？

MainAxisAlignment系列属性确实无法满足你这种精准的尺寸匹配需求——它们只能调整子组件在主轴上的分布方式，没法让下方的矩形自动匹配两个方形加间距的宽度。你需要通过计算精准尺寸来实现对齐，推荐用LayoutBuilder获取父容器的可用宽度，然后推导每个组件的尺寸。

实现思路 #

1. 定义固定的组件间距（比如8.0）
2. 通过LayoutBuilder拿到当前行的可用宽度
3. 计算单个方形的宽度：(可用宽度 - 3*间距)/4（4个方形之间有3个间距）
4. 计算单个矩形的宽度：2*方形宽度 + 间距（两个方形加中间的间距）
5. 用MainAxisAlignment.spaceBetween让组件两端对齐，保证间距一致

完整代码示例 #

Card(
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 1. 左对齐单行文本
        const Text("示例标题"),
        const SizedBox(height: 16),

        // 2. 四个均匀分布的方形
        LayoutBuilder(
          builder: (context, constraints) {
            const double gap = 8.0;
            final double availableWidth = constraints.maxWidth;
            final double squareSize = (availableWidth - 3 * gap) / 4;

            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: List.generate(4, (index) {
                return Container(
                  width: squareSize,
                  height: squareSize,
                  color: Colors.lightBlueAccent,
                );
              }),
            );
          },
        ),
        const SizedBox(height: 16),

        // 3. 与方形对齐的两个矩形
        LayoutBuilder(
          builder: (context, constraints) {
            const double gap = 8.0;
            final double availableWidth = constraints.maxWidth;
            final double squareSize = (availableWidth - 3 * gap) / 4;
            final double rectWidth = 2 * squareSize + gap;

            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  width: rectWidth,
                  height: 60,
                  color: Colors.greenAccent,
                ),
                Container(
                  width: rectWidth,
                  height: 60,
                  color: Colors.greenAccent,
                ),
              ],
            );
          },
        ),
        const SizedBox(height: 16),

        // 4. 右对齐单行图标
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: const [Icon(Icons.more_vert)],
        ),
      ],
    ),
  ),
)

关键说明 #

• LayoutBuilder能获取当前父组件的可用宽度，确保计算出的尺寸适配不同屏幕
• 统一使用MainAxisAlignment.spaceBetween，让行内组件两端对齐，中间间距自动匹配预设值
• 避免直接用MediaQuery.of(context).size.width，因为它获取的是屏幕宽度，没有考虑Card的内边距和其他约束，容易出现溢出

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