flutter：导入资源

大前端 flutter

发布时间 : 2025-08-17 00:00

字数:887 阅读 :

如何导入资源（图片）
1x / 2x / 3x

如何导入资源（图片）

创建资源目录

在更目录下创建 assets目录（名字也可以叫做其他，但是我们约定俗成），然后按资源类型，分别创建目录

编辑 pubspec.yaml 文件

flutter:
  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/
    - assets/icons/
    - assets/fonts/
    - assets/svg/

加入图片

在images下面创建3.0x的文件夹，把图片放进去。接着在利用Flutter GetX Generator这个插件，生成2.0和1.0的图片

assets/
  images/
    icon.png        # 默认 1x
    2.0x/icon.png   # 2x 屏幕用
    3.0x/icon.png   # 3x 屏幕用

还生成了一个file.txt的内容，里面有图片的路径

static const 13399635147767705Jpg = 'assets/images/13399635147767705.jpg';
static const welcomePng = 'assets/images/welcome.png';

创建自己的资源静态类

/// 图片资源
class AssetsImages {
  static const pg = 'assets/images/13399635147767705.jpg';
  static const welcomePng = 'assets/images/welcome.png';
}

读取图片

class ComponentPage extends StatelessWidget {
  const ComponentPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('组件')),
      body: Column(children: [Image.asset(AssetsImages.pg, height: 600)]),
    );
  }
}

1x / 2x / 3x

什么是 1x / 2x / 3x

1x、2x、3x 指的是资源图片的缩放倍数（DPI 密度适配）。

在手机开发中（iOS、Android、Flutter），屏幕分辨率和像素密度不同，同一张图片如果不区分，会导致：

在低分辨率屏幕上太清晰（浪费内存）
在高分辨率屏幕上模糊

于是就有了多套图片资源：

1x → 普通屏幕（低像素密度）
2x → Retina 屏幕（像素密度大约是普通屏幕的 2 倍）
3x → 更高密度屏幕（像素密度约 3 倍，比如部分安卓高端机）

Flutter 的自动适配

在 Flutter 中：

你只需要在 pubspec.yaml 里声明一次图片资源
Flutter 会根据当前设备的屏幕 DPI，自动选择合适的图片（1x、2x、3x）

目录结构示例：

assets/
  images/
    icon.png        # 默认 1x
    2.0x/icon.png   # 2x 屏幕用
    3.0x/icon.png   # 3x 屏幕用

pubspec.yaml 引用：

flutter:
  assets:
    - assets/images/icon.png

使用时：

Image.asset('assets/images/icon.png')

运行时，Flutter 会自动选择：

在 1x 屏幕 → 用 icon.png
在 2x 屏幕 → 用 2.0x/icon.png
在 3x 屏幕 → 用 3.0x/icon.png

逻辑像素

大多数 UI 设计工具（Figma、Sketch、XD）都会选定一个基准屏幕尺寸来做设计，比如：

iOS：常用基准是 iPhone 6/7/8 (375pt × 667pt)，以 1x = 1pt = 1逻辑像素 作为参考。
Android：一般以 360dp × 640dp 作为设计基准，1x = 1dp = 1逻辑像素。

所以设计师看到的 50×50，在我们开发里就是 50逻辑像素。

在 Sketch / Figma 里，可以一键导出 @1x、@2x、@3x

在 PS 里，可以通过切片导出多倍图

例如：设计稿上标注一个图标是 50×50

导出 @1x → 50×50 像素
导出 @2x → 100×100 像素
导出 @3x → 150×150 像素

逻辑像素 vs 物理像素

Flutter 使用的是 逻辑像素（dp/pt） 来布局。
真机屏幕有 设备像素比 DPR（devicePixelRatio），决定了「1逻辑像素 = 几个物理像素」。

例如：

iPhone 11（828×1792 像素，DPR=2） → 屏幕逻辑大小就是 414×896 dp
小米某高端机（1080×2400 像素，DPR≈3） → 屏幕逻辑大小大概 360×800 dp

公式：物理像素 = 逻辑像素 × DPR

360dp × 1 = 360px → 1x
360dp × 2 = 720px → 2x
360dp × 3 = 1080px → 3x

一张图片如何判断

一张1080×2399的图片

1080 ÷ 360 = 3
说明这张图正好是 基准宽度 360dp 的 3 倍
所以它是 3x 图。

同理，高度 2399 ÷ 800 ≈ 3，也符合 3 倍关系。