Flutter布局挑战：我的解法是否正确？有无其他实现方式？

原解法正确性验证 #

你的代码整体符合该布局挑战的要求：左右两侧分别是占满屏幕高度的红色、蓝色容器，中间是高度200的黄色容器，绿色容器位于黄色容器的下半部分。

不过你存疑的中间部分实现，虽然能达到视觉效果，但存在可优化点：

• 依赖固定的margin: EdgeInsets.only(top: 100)定位绿色容器，一旦黄色容器高度调整，这个数值也要手动修改，灵活性不足
• 绿色容器无需重复设置width: 100，它会默认继承父容器（黄色Container）的宽度

优化版原思路实现 #

可以用Align组件替代margin来实现绿色容器的底部定位，无需依赖固定数值，适配性更好：

home: Scaffold(
  backgroundColor: Colors.teal,
  body: SafeArea(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          width: 100,
          height: double.infinity,
          color: Colors.red,
        ),
        Container(
          width: 100,
          height: 200,
          color: Colors.yellow,
          // 用Align定位到容器底部
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              height: 100,
              color: Colors.green,
            ),
          ),
        ),
        Container(
          width: 100,
          height: double.infinity,
          color: Colors.blue,
        ),
      ],
    ),
  ),
),

用Row + Column组合实现的方案 #

如果要同时使用Row和Column完成挑战，核心思路是：整体用Row布局左右容器，中间部分用Column控制绿色容器的垂直位置，同时给Column套一个黄色背景的容器：

home: Scaffold(
  backgroundColor: Colors.teal,
  body: SafeArea(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          width: 100,
          height: double.infinity,
          color: Colors.red,
        ),
        // 中间部分：黄色容器包裹Column
        Container(
          width: 100,
          height: 200,
          color: Colors.yellow,
          child: Column(
            // 让Column内的元素靠底部对齐
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            ],
          ),
        ),
        Container(
          width: 100,
          height: double.infinity,
          color: Colors.blue,
        ),
      ],
    ),
  ),
),

这种方式利用Column的mainAxisAlignment属性控制绿色容器位置，比固定margin更符合Flutter布局逻辑，也更易于维护。

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