如何在Flutter中实现响应式布局？调整屏幕尺寸时页面变形如何解决

核心问题排查 #

你的布局变形主要由以下错误写法导致：

• 子容器硬编码固定高度：左右两侧内容容器写死height: 800，图片固定宽高288、底部边距265等绝对值尺寸，窗口缩放时直接出现溢出或错位
• 全局尺寸计算错误：子组件内直接通过MediaQuery.of(context).size获取全局屏幕尺寸计算占比，但子组件被Expanded包裹后实际可用空间远小于全局屏幕尺寸，占比计算完全不符合实际布局约束
• 滚动容器嵌套逻辑错误：宽屏模式下给Row套了SingleChildScrollView，导致Row内的两个Expanded子组件失去父容器宽度约束，宽度会无限拉伸
• 子容器宽度越界：左侧橙色容器设置width: _screenSize.width * 1.2，超出了Expanded分配的父容器宽度，直接导致内容溢出

修复方案 #

1. 修正根布局逻辑 #

移除宽屏模式下Row外层的SingleChildScrollView，如果需要全局滚动统一套在布局最外层即可：

body: LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    final layoutWidget = (constraints.maxWidth < 600)
        ? Column(
            mainAxisSize: MainAxisSize.min,
            children: childrenVertical,
          )
        : Row(
            mainAxisSize: MainAxisSize.min,
            children: childrenHorizontal,
          );
    // 全局滚动统一在这里加，避免破坏Expanded的空间分配逻辑
    return SingleChildScrollView(
      child: layoutWidget,
    );
  },
),

2. 子组件改用父容器约束计算尺寸 #

所有子组件不要直接调用MediaQuery获取全局尺寸，改用LayoutBuilder获取当前组件的实际可用约束计算占比，以左侧容器改造为例：

class _RectanguloIzquierdaHorizontalState extends State<RectanguloIzquierdaHorizontal> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, parentConstraints) {
        // parentConstraints.maxWidth 是当前左侧容器实际可用宽度
        // parentConstraints.maxHeight 是当前左侧容器实际可用高度
        final padding = parentConstraints.maxWidth * 0.1;
        return Padding(
          padding: EdgeInsets.only(left: padding),
          child: Container(
            // 移除硬编码的width和height，Expanded会自动填充父容器空间
            decoration: const BoxDecoration(color: Colors.orange),
            child: Column(
              children: [
                SizedBox(height: parentConstraints.maxHeight * 0.125),
                Container(
                  margin: EdgeInsets.only(
                    left: parentConstraints.maxWidth * 0.03,
                    right: parentConstraints.maxWidth * 0.04,
                  ),
                  child: AutoSizeText(
                    "TEXT TEXT TEXT",
                    style: const TextStyle(fontSize: 16, color: Colors.white),
                    maxFontSize: 16,
                    minFontSize: 12,
                    maxLines: 6,
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(
                    left: parentConstraints.maxWidth * 0.02,
                    right: parentConstraints.maxWidth * 0.13,
                  ),
                  child: AutoSizeText(
                    "TEXT TEX TEX",
                    style: const TextStyle(fontSize: 100),
                    maxFontSize: 100,
                    minFontSize: 30,
                    maxLines: 1,
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(
                    top: parentConstraints.maxHeight * 0.06,
                    left: parentConstraints.maxWidth * 0.06,
                    right: parentConstraints.maxWidth * 0.06,
                  ),
                  // 高度按照父容器可用高度比例设置，不要写死
                  height: parentConstraints.maxHeight * 0.5,
                  decoration: BoxDecoration(
                    color: Colors.purple,
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20),
                    ),
                    boxShadow: const [
                      BoxShadow(
                        color: Colors.black26,
                        blurRadius: 10.0,
                        spreadRadius: 2.0,
                        offset: Offset(2.0, 10),
                      )
                    ],
                  ),
                  // 内部嵌套容器同理，都用parentConstraints计算尺寸
                )
              ],
            ),
          ),
        );
      }
    );
  }
}

3. 移除所有固定绝对值尺寸 #

图片、间距等所有固定值都替换为父容器约束的比例值，或者用Flexible/Expanded自动分配空间，图片改造示例：

Image(
  image: const AssetImage('image'),
  // 宽度占父容器的60%，高度按原图比例自适应
  width: parentConstraints.maxWidth * 0.6,
  fit: BoxFit.contain,
),

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