Flutter中SizeConfig尺寸配置与固定数值设置的差异

这段代码实现了一个基于基准尺寸（375×812，典型iPhone X尺寸）的自适应尺寸工具，通过init方法获取当前设备的屏幕参数，再通过getProportionateScreenWidth/getProportionateScreenHeight将设计稿上的数值按比例转换为适配当前设备的尺寸值。它和直接写固定数值的核心差异如下：

1. 屏幕适配能力天差地别 #

• 直接固定数值：比如写horizontal: 20，这个值是Flutter的逻辑像素，在不同尺寸设备上的视觉占比差异极大——小屏手机上间距会显得过宽，平板上又会挤成一团，完全没办法适配多设备。
• SizeConfig方式：以设计稿的基准尺寸为参照，自动计算当前设备与基准的比例。比如当前设备宽度是750（是375的2倍），getProportionateScreenWidth(20)会返回40，保证这个间距在当前设备上的视觉占比和设计稿完全一致，完美适配各种尺寸设备。

2. 布局视觉一致性的保障 #

• 直接固定数值：同一布局在不同设备上，元素的相对比例会彻底失衡。比如设计稿上按钮占屏幕1/3宽度，固定数值写死的话，大屏设备上可能只占1/5，完全偏离设计意图。
• SizeConfig方式：所有元素的尺寸都是基于基准比例计算，不管设备多大，元素间的相对比例、间距都能和设计稿保持一致，整体布局风格统一。

3. 代码维护成本的差异 #

• 直接固定数值：要适配多设备的话，得手动加一堆MediaQuery判断或者LayoutBuilder逻辑，代码冗余到爆炸，后续改尺寸还得一个个找固定值修改，维护起来头大。
• SizeConfig方式：只需要在App初始化时调用一次SizeConfig().init(context)，之后所有尺寸都通过工具函数获取。要调整基准尺寸或者适配逻辑，只改工具函数里的基准值就行，维护成本极低。

4. 使用场景的局限性 #

• 直接固定数值：只适合那些不需要随屏幕变化的固定元素，比如小图标、特定场景下的固定按钮，灵活性极差。
• SizeConfig方式：虽然解决了大部分自适应问题，但它只基于宽高比例适配，没考虑横竖屏切换后的布局调整（不过代码里已经获取了orientation，可以扩展适配）；另外如果你的设计稿不是基于375×812的，得修改代码里的基准值，不然适配结果会和设计稿有偏差。

附：SizeConfig实现代码 #

import 'package:flutter/material.dart';

class SizeConfig {
  static late MediaQueryData _mediaQueryData;
  static late double screenWidth;
  static late double screenHeight;
  static double? defaultSize;
  static Orientation? orientation;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    orientation = _mediaQueryData.orientation;
  }
}

double getProportionateScreenHeight(double inputHeight) {
  double screenHeight = SizeConfig.screenHeight;
  return (inputHeight / 812.0) * screenHeight;
}


double getProportionateScreenWidth(double inputWidth) {
  double screenWidth = SizeConfig.screenWidth;
  return (inputWidth / 375.0) * screenWidth;
}

使用示例 #

EdgeInsets.symmetric(
                horizontal: getProportionateScreenWidth(20)),

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