理解 UI 设计稿与 Flutter 像素适配

在移动应用开发中，设计稿通常以特定的尺寸标注，比如 750px 的宽度，这种设计规范主要为适配不同设备的屏幕密度（DPI）和分辨率。而在 Flutter 中，我们使用的是逻辑像素而非物理像素。为了实现设计稿到代码的无缝适配，理解像素的概念以及 Flutter 的适配方式至关重要。

1. 物理像素与逻辑像素

物理像素（Physical Pixels）：

• 设备屏幕实际存在的像素点，是硬件层面的真实像素。

逻辑像素（Logical Pixels）：

• Flutter 使用的抽象单位，用于描述屏幕上的布局和尺寸，独立于设备的物理分辨率。
• 逻辑像素通过 devicePixelRatio（设备像素比）与物理像素进行换算：

  devicePixelRatio = physicalPixels / logicalPixels

例如：

• 一个设备的物理分辨率为 1080px，逻辑宽度为 360，则其 devicePixelRatio 为：

  devicePixelRatio = 1080 / 360 = 3

• 这意味着 1 个逻辑像素由 3×3 个物理像素组成。

2. devicePixelRatio 是什么？

devicePixelRatio 是每个逻辑像素由多少物理像素组成的比例，通常根据设备屏幕密度决定：

在 Flutter 中，可以通过以下方式获取 devicePixelRatio：

1. 直接使用 window：

   import 'dart:ui';
   double ratio = window.devicePixelRatio;

2. 通过 MediaQuery：

   double ratio = MediaQuery.of(context).devicePixelRatio;

3. UI 设计稿的像素含义

设计稿中标注的像素（如 750px 宽）通常是基于特定设备分辨率的屏幕宽度，这在移动端开发中非常常见。对于 Flutter，这些设计稿尺寸需要通过适配工具转换为逻辑像素。

设计稿中的 750px 是什么？

• 750px 是假定设备的物理宽度为 750 像素，常用于 iPhone 的设计基准。
• 在 Flutter 中，如果设备的 devicePixelRatio 为 2，逻辑宽度为：

  logicalWidth = 750 / 2 = 375

如何使用 750px 设计稿适配 Flutter？

1. 设置设计基准尺寸： 使用 flutter_screenutil 适配工具，初始化时指定设计稿的尺寸：

   ScreenUtil.init(
     context,
     designSize: Size(750, 1334),
     minTextAdapt: true,
     splitScreenMode: true,
   );

2. 转换设计稿像素： 使用工具类将设计稿尺寸动态映射到逻辑像素：

   Container(
     width: 200.w,  // 设计稿中的 200px 转换为逻辑宽度
     height: 100.h, // 设计稿中的 100px 转换为逻辑高度
   );

3. 字体适配： 字体大小同样需要转换：

   Text(
     "Hello, World!",
     style: TextStyle(fontSize: 16.sp), // 设计稿中的 16px 字号
   );

4. 1x、2x、3x 图标的意义

在 UI 设计中，图标通常会提供 1x、2x、3x 三种尺寸，以适配不同的屏幕密度：

• 1x：标准屏幕（devicePixelRatio = 1），图标大小为设计稿的原始尺寸。
• 2x：中密度屏幕（devicePixelRatio = 2），图标尺寸是 1x 的 2 倍。
• 3x：高密度屏幕（devicePixelRatio = 3），图标尺寸是 1x 的 3 倍。

在 Flutter 中的使用方法：

将不同密度的图标存储在 assets 目录下：

assets/
  icons/
    my_icon.png        # 默认 1x 图标
    2.0x/
      my_icon.png      # 2x 图标
    3.0x/
      my_icon.png      # 3x 图标

代码中直接引用：

Image.asset('assets/icons/my_icon.png');

Flutter 会根据设备的 devicePixelRatio 自动选择对应的图标版本。

5. 总结

• 物理像素是设备的真实像素，逻辑像素是 Flutter 用于布局的单位。
• devicePixelRatio 决定了逻辑像素与物理像素的比例。
• UI 设计稿中的尺寸（如 750px 宽）需要通过工具转换为逻辑像素，才能适配不同设备。
• 提供 1x、2x、3x 图标，可以确保图标在高像素密度设备上清晰显示。
• 使用适配工具（如 flutter_screenutil），可以轻松实现设计稿到代码的无缝映射。

通过正确理解像素的概念和适配方法，可以让你的 Flutter 应用在各种设备上都呈现出一致的 UI 效果。

主题授权提示：请在后台主题设置-主题授权-激活主题的正版授权，授权购买：RiTheme官网