如何在Flutter中为padding top应用Media Query适配不同设备？

一、通过MediaQuery动态计算适配边距 #

MediaQuery可以获取当前设备的屏幕尺寸、像素密度等核心信息，以此为基础计算的边距能自动适配不同设备的屏幕差异。

实现步骤 #

1. 在build方法中获取媒体查询实例：

   final mediaQuery = MediaQuery.of(context);
   

2. 根据屏幕比例计算边距值，比如将顶部边距设为屏幕高度的2%，水平边距设为屏幕宽度的4%：

   final double topPadding = mediaQuery.size.height * 0.02;
   final double leftPadding = mediaQuery.size.width * 0.04;
   

3. 将计算后的变量替换原有的固定数值，应用到Padding组件中。

修改后的完整代码 #

import 'package:flutter/material.dart';

class MenuWidget3 extends StatelessWidget {
  const MenuWidget3({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    // 按屏幕比例计算适配边距
    final double topPadding = mediaQuery.size.height * 0.02;
    final double outerLeftPadding = mediaQuery.size.width * 0.04;
    final double innerLeftPadding = mediaQuery.size.width * 0.013;

    return Scaffold(
      backgroundColor: const Color(0xfff9f9f9),
      body: SafeArea(
        child: Stack(
          children: [
            Padding(
              padding: EdgeInsets.only(top: topPadding, left: outerLeftPadding),
              child: Row(
                children: [
                  Padding(
                    padding: EdgeInsets.only(left: innerLeftPadding),
                    child: Text(
                      'first',
                      style: TextStyle(
                          color: Colors.black,
                          fontFamily: 'Pretendard',
                          fontWeight: FontWeight.w600,
                          fontSize: mediaQuery.textScaleFactor * 20),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

二、其他适配设备边距差异的方案 #

• 使用LayoutBuilder：如果布局依赖父容器尺寸而非全屏，LayoutBuilder可获取父组件的约束信息，更精准地计算边距。
• 适配库简化流程：如flutter_screenutil，只需传入设计稿基准尺寸，即可自动完成全维度适配，无需手动计算比例。
• 结合SafeArea强化适配：SafeArea会自动避开状态栏、底部导航栏等系统预留区域，叠加MediaQuery计算的边距，能更好适配异形屏设备。

关键注意点 #

• 摒弃固定数值：所有边距、文字大小尽量采用比例或相对单位，避免硬编码固定dp值。
• 适配系统文字缩放：通过mediaQuery.textScaleFactor调整文字大小，确保用户修改系统字体时布局正常。

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