如何在Flutter中创建嵌套L形Widget

不用Stack或者嵌套Container边框，用Row、Column和Expanded就能轻松实现响应式的L形设计，核心思路是利用布局组件的空间分配特性，结合AspectRatio保证整体为方形，以下是具体实现：

代码示例（左竖条+右下横条的L形） #

import 'package:flutter/material.dart';

class LShapeLayout extends StatelessWidget {
  const LShapeLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1, // 强制保持1:1的方形比例，实现响应式适配
      child: Row(
        children: [
          // L形的左侧竖条：占满整个高度，宽度平分
          Expanded(
            child: Container(
              color: const Color(0xFF2D3748),
              child: const Center(
                child: Text(
                  "左区域",
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
          ),
          // 右侧区域：分为顶部空白和底部横条
          Expanded(
            child: Column(
              children: [
                // 顶部空白区域，占满右侧的上半部分高度
                Expanded(child: Container()),
                // L形的右下横条：占满右侧的下半部分高度，宽度为右侧全宽
                Expanded(
                  child: Container(
                    color: const Color(0xFF2D3748),
                    child: const Center(
                      child: Text(
                        "右下区域",
                        style: TextStyle(color: Colors.white, fontSize: 18),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

思路说明 #

1. 响应式方形基础：用AspectRatio设置aspectRatio: 1，确保整个布局始终是方形，无论父容器尺寸如何变化，都会按比例缩放。
2. 空间分配：
   • 外层Row将方形平分为左右两个等宽区域
   • 左侧直接用Expanded包裹容器，形成L形的竖边
   • 右侧用Column分为上下两部分，顶部空白，底部用Expanded包裹容器，形成L形的横边
3. 灵活调整比例：如果需要调整L形各部分的宽度/高度比例，只需修改Expanded的flex参数即可（比如Expanded(flex: 2, ...)让该部分占2份空间）。

变体：左上块+底部横条的L形 #

如果你的L形是左上区域加底部全宽区域，只需调整外层为Column：

AspectRatio(
  aspectRatio: 1,
  child: Column(
    children: [
      Expanded(
        child: Row(
          children: [
            Expanded(
              child: Container(
                color: const Color(0xFF2D3748),
                child: const Center(child: Text("左上区域", style: TextStyle(color: Colors.white))),
              ),
            ),
            Expanded(child: Container()), // 右上空白
          ],
        ),
      ),
      Expanded(
        child: Container(
          color: const Color(0xFF2D3748),
          child: const Center(child: Text("底部区域", style: TextStyle(color: Colors.white))),
        ),
      ),
    ],
  ),
)

这种方案完全基于Flutter基础布局组件，没有嵌套复杂度，Expanded能正常工作，且天然支持响应式适配。

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