Flutter实现指定布局的现有代码是否有更简洁优雅的实现方案？

优化后代码 #

// 外层浅绿色Container
Container(
  color: Colors.lightGreen,
  // 直接用Align居中内部的深绿色Row容器
  child: Align(
    child: FractionallySizedBox(
      widthFactor: 0.8,
      heightFactor: 0.2,
      // 深绿色Row容器
      child: Container(
        color: Colors.darkGreen,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            // 红色区块
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.red,
                // 直接用Center配合宽高因子实现内部黄色块居中占80%宽高
                child: Center(
                  child: Container(
                    widthFactor: 0.8,
                    heightFactor: 0.8,
                    color: Colors.yellow,
                  ),
                ),
              ),
            ),
            const Spacer(),
            // 蓝色区块
            Expanded(
              flex: 2,
              child: Container(color: Colors.blue),
            ),
            const Spacer(),
            // 橙色区块
            Expanded(
              flex: 2,
              child: Container(color: Colors.orange),
            ),
          ],
        ),
      ),
    ),
  ),
)

核心优化点 #

• 删掉了原代码冗余的Column + Expanded + SizedBox.expand三层嵌套，直接用Align组件实现内部容器居中，层级减少近一半，可读性更高
• 红色区块内部的黄色块无需嵌套FractionallySizedBox，直接用Center配合Container自带的widthFactor/heightFactor属性即可实现需求，逻辑更直观
• 所有可固定的组件添加const标识，提升运行时性能
• 保留了原代码的宽高比例、间距逻辑，和原有实现效果完全一致

如果想要进一步简化，也可以把三个彩色块的通用逻辑抽成独立的Widget，减少重复代码：

// 抽离的通用色块组件
Widget _buildColorBlock(Color color, [Widget? child]) {
  return Expanded(
    flex: 2,
    child: Container(
      color: color,
      child: child,
    ),
  );
}

// 调用时的Row代码
child: Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    _buildColorBlock(
      Colors.red,
      Center(
        child: Container(
          widthFactor: 0.8,
          heightFactor: 0.8,
          color: Colors.yellow,
        ),
      ),
    ),
    const Spacer(),
    _buildColorBlock(Colors.blue),
    const Spacer(),
    _buildColorBlock(Colors.orange),
  ],
)

内容的提问来源于stack exchange，提问作者Marc Van Daele