如何在Flutter中构建图片中的第二个Widget组（无需MediaQuery）

核心思路 #

通过LayoutBuilder获取父容器约束实现相对尺寸计算，结合AspectRatio固定宽高比，再用Stack+Positioned完成卡片叠放，全程无需依赖MediaQuery，同时保证宽屏场景下比例不变。

完整代码实现 #

LayoutBuilder(
  builder: (context, constraints) {
    // 上层卡片宽度占父容器75%，可按需调整
    final double topCardWidth = constraints.maxWidth * 0.75;
    // 偏移量基于父容器尺寸比例
    final double offsetX = constraints.maxWidth * 0.1;
    final double offsetY = constraints.maxHeight * 0.1;

    return AspectRatio(
      // 设定卡片组宽高比，确保宽屏时比例一致
      aspectRatio: 1.7,
      child: Stack(
        clipBehavior: Clip.none, // 允许卡片超出Stack范围，避免裁剪
        children: [
          // 底层卡片
          Container(
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(16),
              boxShadow: const [
                BoxShadow(
                  color: Color(0x1A000000),
                  blurRadius: 12,
                  offset: Offset(4, 4),
                )
              ],
            ),
            child: const Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "底层卡片标题",
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  SizedBox(height: 10),
                  Text(
                    "这里是底层卡片的详细描述内容，支持多行显示",
                    style: TextStyle(
                      color: Color(0xFF666666),
                      fontSize: 14,
                    ),
                  ),
                ],
              ),
            ),
          ),
          // 上层叠放卡片
          Positioned(
            left: offsetX,
            top: offsetY,
            child: Container(
              width: topCardWidth,
              height: constraints.maxHeight * 0.85, // 高度占父容器85%
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16),
                boxShadow: const [
                  BoxShadow(
                    color: Color(0x26000000),
                    blurRadius: 16,
                    offset: Offset(6, 6),
                  )
                ],
              ),
              child: const Padding(
                padding: EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "上层卡片标题",
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    SizedBox(height: 10),
                    Text(
                      "上层卡片的描述信息，因为叠放所以视觉层级更高",
                      style: TextStyle(
                        color: Color(0xFF666666),
                        fontSize: 14,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  },
)

关键细节说明 #

• LayoutBuilder：替代MediaQuery获取父容器可用尺寸，所有布局参数都基于该约束计算，适配任意屏幕宽度。
• AspectRatio：固定卡片组整体宽高比，宽屏时自动按比例缩放，避免布局变形。
• Stack+Positioned：通过left/top的比例值设置偏移，实现卡片叠放的视觉效果，偏移量随父容器尺寸动态调整。
• clipBehavior: Clip.none：关闭Stack的裁剪功能，确保上层卡片超出部分正常显示，保证叠放视觉完整性。

自定义调整建议 #

• 修改aspectRatio值可调整卡片组整体宽高比例，匹配设计需求。
• 调整topCardWidth、offsetX、offsetY的比例系数，可改变上层卡片的大小和叠放位置。
• 替换BoxDecoration中的阴影、圆角、颜色参数，适配产品视觉风格。

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