企业官网建设流程全解析

• 示例工程
• 移动开发

Flutter 工程在 iOS 平台冷启动时会先显示一张由系统绘制的静态启动屏，随后才切换为 Flutter 引擎渲染的首帧画面。本指南以 Flutter-Notebook 仓库中 draggable_demo 的 iOS 工程为例，完整解读 LaunchImage.imageset/README.md 这份说明文档：先剖析启动屏资源目录的结构与引用链路，再给出"直接替换图片"和"通过 Xcode 可视化替换"两种可落地的定制方案。读完后你将清楚知道 Flutter iOS 启动屏由哪些文件组成、如何修改，以及替换后如何验证生效。

一、这份 README 在讲什么

该 README 是 Flutter 模板工程自动生成的标准说明文件，全文只交代了一件事：如何用自定义图片替换默认的 iOS 启动屏资源，并提供了两种等价做法：

1. 直接替换LaunchImage.imageset目录下的图片文件；
2. 通过 Xcode 打开工程，在 Project Navigator 中选中Runner/Assets.xcassets，将目标图片拖入对应的 Launch Image 槽位。

内容虽短，但它指向了 iOS 启动屏定制中最核心的环节：LaunchImage.imageset这个资源集合（image set）。下文将结合该工程的实际文件，把这份说明展开成一份可照着做的操作指南。

二、LaunchImage.imageset 目录结构剖析

先看该目录在仓库中的实际构成（路径：mecury_project/example/draggable_demo/ios/Runner/Assets.xcassets/LaunchImage.imageset）：

LaunchImage.imageset/ ├── Contents.json # 资源清单，声明该 image set 的组成 ├── LaunchImage.png # @1x 基准图（本仓库为 1x1 占位图） ├── LaunchImage@2x.png # @2x 高清图（本仓库为 1x1 占位图） ├── LaunchImage@3x.png # @3x 超高清图（本仓库为 1x1 占位图） └── README.md # 本文解读的对象

其中 Contents.json 是 Xcode 资产目录（Asset Catalog）的核心清单，声明了该 image set 包含哪些图片以及它们分别对应何种像素密度：

{ "images" : [ { "idiom" : "universal", "filename" : "LaunchImage.png", "scale" : "1x" }, { "idiom" : "universal", "filename" : "LaunchImage@2x.png", "scale" : "2x" }, { "idiom" : "universal", "filename" : "LaunchImage@3x.png", "scale" : "3x" } ], "info" : { "version" : 1, "author" : "xcode" } }

字段含义：

• idiom：目标设备类型，universal表示同时覆盖 iPhone 与 iPad；
• filename：实际图片文件名，必须与目录下的文件一一对应；
• scale：像素密度档位。@1x对应普通密度（1 物理像素 = 1 逻辑点），@2x、@3x分别对应 2 倍、3 倍高清屏，iOS 会按设备屏幕密度自动选择对应档位的图片；
• info：清单元信息，version固定为 1，author由 Xcode 写入。

从该目录的实际文件可以看到，三张LaunchImage*.png都是1x1 像素的透明占位图（每张仅 68 字节）。这是 Flutter 模板工程生成启动屏资源时的典型形态：默认不提供自定义图案，由系统以纯色背景呈现，Flutter 引擎完成初始化后再接管屏幕。因此，这份 README 提示的"替换图片"，本质上就是把这三张占位图换成你自己的设计稿。

三、启动屏的引用链路：storyboard + Info.plist

单纯替换图片还不够，需要理解启动屏是如何被 iOS 加载的。查看同目录下的 LaunchScreen.storyboard（位于Runner/Base.lproj/），可以看到启动场景的核心定义：

<imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" image="LaunchImage" ... /> <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>

这段 XML 说明：

• 启动场景中只有一个UIImageView，其image属性直接指向名为LaunchImage的资源，即对应LaunchImage.imageset这个 image set；
• contentMode="center"表示图片按原始尺寸居中显示，不做拉伸或缩放；
• 背景色为纯白（red=1 green=1 blue=1），这就是为什么 Flutter 默认工程冷启动时会先闪一下白屏——白底 + 透明占位图；
• 图片通过约束（centerX / centerY）居中于整个屏幕。

而 Info.plist 中的UILaunchStoryboardName键则完成了最后的绑定：

<key>UILaunchStoryboardName</key> <string>LaunchScreen</string>

也就是说，完整的引用链路是：Info.plist声明启动 storyboard →LaunchScreen.storyboard声明LaunchImage图片视图 →LaunchImage.imageset提供按密度分档的实际图片。只要替换 imageset 中的三张图片，而不改动 storyboard 与 Info.plist，启动屏图案就会随之改变，这也是该 README 给出的第一种方案之所以可行的底层原因。

四、方案一：直接替换图片文件

这是 README 推荐的第一种方式，适合已经准备好设计稿、希望在命令行/文件管理器层面快速完成的场景。具体步骤如下：

1. 准备设计稿：为同一图案准备三个密度档位的图片，分别对应LaunchImage.png（@1x）、LaunchImage@2x.png（@2x）、LaunchImage@3x.png（@3x）；
2. 覆盖文件：将准备好的图片复制到 LaunchImage.imageset 目录，覆盖同名的三张占位图；
3. 保持清单不变：只要文件名与 Contents.json 中的声明一致，就无需改动该 JSON 文件；
4. 重新构建运行：执行flutter run或重新安装 App，冷启动观察新启动屏。

实际操作中有两点值得注意：

• 不要只替换其中一个档位。缺少@2x或@3x图片时，高密度设备会回退到低分辨率图，导致启动图案模糊或被裁切；
• 注意系统资源缓存。模拟器或真机有时会缓存旧资源，若替换后启动屏未变化，可先彻底卸载旧版本再重新安装构建。

五、方案二：通过 Xcode 可视化替换

如果你更习惯在图形界面操作，README 给出的第二种方式同样完整：

1. 在项目根目录执行open ios/Runner.xcworkspace，用 Xcode 打开工程（该命令即 README 原文所示，ios/Runner.xcworkspace的完整路径为 mecury_project/example/draggable_demo/ios/Runner.xcworkspace）；
2. 在 Xcode 左侧的 Project Navigator 中展开Runner，选中Assets.xcassets资产目录；
3. 找到其中的LaunchImage条目（即LaunchImage.imageset），将目标图片直接拖入对应的 1x / 2x / 3x 槽位；
4. 若拖入的图片尺寸与槽位不匹配，可在右侧 Attributes Inspector 中确认/调整该 image set 的 Scale 属性，保证三档图片正确映射；
5. 保存后在 Xcode 中直接运行，或在外部执行flutter run验证。

相比手改文件，Xcode 方式的好处是能直观看到资源是否被正确识别、三个密度档位是否齐全，排查问题时更省力。

六、定制启动屏的设计建议

结合本工程的实际配置（白底 + 居中的 1x1 透明图），有几点经验值得留意：

• 把握展示窗口：iOS 启动屏是 App 冷启动到首帧渲染完成之间的静态过渡画面，停留时间极短，不适合承载需要长时间阅读的内容；
• 衔接 Flutter 首帧：启动屏底色默认是白色（见 LaunchScreen.storyboard 中的backgroundColor），若你的 App 主色调不是白色，建议同步调整 storyboard 的背景色或直接放入纯色背景图，避免"闪白"造成视觉割裂；
• 保持简单静态：启动屏只展示静态图片，不要在启动屏资源中放置动态元素或依赖网络加载的内容，否则会拖慢冷启动体验；
• 善用contentMode="center"：当前 storyboard 将图片设为居中不缩放，若你的设计稿需要铺满全屏，需要另行调整 storyboard 的 contentMode 与约束，而不仅是换图。

七、验证修改是否生效

完成上述任一方案后，可以通过以下方式确认启动屏是否替换成功：

1. 冷启动观察：杀掉 App 进程后重新启动（或直接卸载重装），在 Flutter 首帧出现前观察启动画面是否为新图案；
2. 多机型验证：分别在一台普通密度与一台高密度（@3x）设备上检查，确认三档图片均正确加载；
3. 检查构建产物：从 Xcode 构建日志或ios/Runner/Assets.xcassets的编译结果中，确认LaunchImage资源未被遗漏。

结语

一份只有三行文字的模板 README，背后其实串联着Info.plist、LaunchScreen.storyboard与LaunchImage.imageset三个层面的协作。理解这条引用链路后，无论采用"直接替换文件"还是"Xcode 拖拽"方式，都能准确、快速地定制 Flutter 应用在 iOS 上的启动画面；Flutter-Notebook 仓库中 draggable_demo 的完整 iOS 工程文件，正是练习这一流程的现成样本。

• 示例工程
• 移动开发