如何用Row和Column组件在Card容器内实现L型布局

可以通过Stack结合Positioned组件来实现你需要的布局，完整代码示例如下：

SizedBox(
  height: 300, // 控制Card的总高度
  child: Card(
    elevation: 4,
    child: Stack(
      children: [
        // 蓝色区域：全高，固定宽度
        const Positioned(
          left: 0,
          top: 0,
          bottom: 0,
          width: 100, // 可自行调整固定宽度
          child: ColoredBox(color: Colors.blue),
        ),
        // 绿色区域：固定高度，剩余宽度
        const Positioned(
          left: 100,
          top: 0,
          right: 0,
          height: 80, // 可自行调整固定高度
          child: ColoredBox(color: Colors.green),
        ),
        // 紫色区域：Card剩余高度，固定宽度
        Positioned(
          left: 0,
          top: 80, // 与绿色区域高度对齐
          bottom: 0,
          width: 100,
          child: const ColoredBox(color: Colors.purple),
        ),
        // 粉色区域：Card剩余高度，剩余宽度
        Positioned(
          left: 100,
          top: 80,
          right: 0,
          bottom: 0,
          child: const ColoredBox(color: Colors.pink),
        ),
      ],
    ),
  ),
)

说明 #

• 可根据需求修改SizedBox的height、各区域的固定宽高数值
• 示例中用ColoredBox占位，实际可替换为业务所需的子组件
• Positioned通过精准定位完美匹配你提出的布局尺寸规则

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