如何在Flutter应用中适配Figma设计稿的尺寸？

现有方案问题分析 #

你当前使用的比例适配法核心逻辑没有问题，不需要额外手动处理devicePixelRatio——Flutter使用的尺寸单位默认是逻辑像素，和Figma导出的设计稿逻辑像素是对齐的，devicePixelRatio由框架底层自动处理渲染转换，业务层无需干预。
适配效果不符合预期一般由以下3个原因导致：

• 比例换算基准值错误：你直接用设备总高度做换算基准，没有扣除状态栏、底部安全区等系统占用的不可绘制区域，导致实际内容区域比例偏移
• 适配规则未区分场景：所有元素都按固定比例换算，会导致大尺寸设备上文字、图标等元素过大，不符合平台设计规范
• 未处理特殊布局场景：需要保持固定宽高比的元素、占满剩余空间的元素硬写换算值，会出现拉伸或溢出问题

优化适配实现 #

1. 修正比例换算基准 #

class SizeConfig {
  static late MediaQueryData _mediaQueryData;
  /// 设备总逻辑宽度
  static late double screenWidth;
  /// 设备总逻辑高度
  static late double screenHeight;
  /// 可绘制区域宽度（排除侧边系统栏，一般等于总宽度）
  static late double usableWidth;
  /// 可绘制区域高度（排除状态栏、底部安全区高度）
  static late double usableHeight;
  /// Figma设计稿标准宽度
  static const double designWidth = 320;
  /// Figma设计稿内容区域高度
  static const double designHeight = 693;

  static void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    final padding = _mediaQueryData.padding;
    usableWidth = screenWidth;
    usableHeight = screenHeight - padding.top - padding.bottom;
  }
}

extension SizeDoubleExt on double {
  /// 水平方向尺寸换算：用于容器宽度、水平边距、圆角等
  double w() => (this / SizeConfig.designWidth) * SizeConfig.usableWidth;
  /// 垂直方向尺寸换算：用于容器高度、垂直边距、纵向偏移等
  double h() => (this / SizeConfig.designHeight) * SizeConfig.usableHeight;
  /// 字体、图标尺寸换算：取宽高比例较小值，避免大尺寸设备上元素过大
  double sp() {
    final wScale = (this / SizeConfig.designWidth) * SizeConfig.usableWidth;
    final hScale = (this / SizeConfig.designHeight) * SizeConfig.usableHeight;
    return wScale < hScale ? wScale : hScale;
  }
}

2. 初始化和使用规则 #

• 在应用根组件的build方法中调用SizeConfig.init(context)，如果应用支持横竖屏切换，每次页面重建时都会自动更新基准值
• 使用示例：

// 容器宽度
Container(width: 80.w());
// 字体大小
Text("示例文本", style: TextStyle(fontSize: 14.sp()));

3. 特殊场景适配 #

• 占满全屏/剩余空间的元素优先使用Expanded、Flexible、FractionallySizedBox组件实现，不要硬写设计稿换算值
• 需要严格保持设计稿宽高比的元素，用AspectRatio组件包裹，直接传入设计稿的宽高比即可，无需手动换算尺寸
• 列表类、滚动类内容优先按元素逻辑做自适应，不要强制按设计稿高度换算每个列表项的高度

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