定制 Google Maps Flutter 示例工程的 iOS 启动画面Launch ScreenLaunchImage.imageset 资源替换完全指南【免费下载链接】packagesA collection of useful packages maintained by the Flutter team项目地址: https://gitcode.com/GitHub_Trending/pac/packagesiOS 应用在进程启动、Flutter 引擎完成首帧渲染之前系统会先展示一个由原生层提供的“启动画面”Launch Screen。本文以 Flutter 官方仓库中google_maps_flutter插件示例工程google_maps_flutter_example的 iOS Runner 工程为实例讲解LaunchImage.imageset资源目录的结构、工作原理与两种定制方法直接替换图片文件或通过 Xcode 可视化操作。读完本文你将掌握如何为任何 Flutter iOS 工程替换启动画面资源并理解从Info.plist到LaunchScreen.storyboard再到Assets.xcassets的完整调用链。关联文档与工程位置本文依据的原始文档位于LaunchImage.imageset/README.md该文档位于google_maps_flutter示例应用的 iOS Runner 工程中。整个示例工程通过 example/pubspec.yaml 以路径依赖path: ../的方式直接引用同仓库的google_maps_flutter插件源码是插件官方自带的演示 App其 iOS 工程结构完全遵循 Flutter 官方模板因此本文的方法对任意 Flutter 项目同样适用。iOS 启动画面机制简述iOS 启动画面Launch Screen是 App 被系统拉起后立即显示的静态画面用于掩盖引擎与首帧之间的加载空白期。在 Flutter 工程中这一阶段发生在 Dart VM 初始化与首帧渲染之前因此启动画面必须由 iOS 原生层提供无法用 Flutter Widget 实现。在示例工程的 Info.plist 中可以看到关键声明keyUILaunchStoryboardName/key stringLaunchScreen/stringUILaunchStoryboardName指定了系统在启动时加载的 Storyboard 名称LaunchScreen对应文件为 Runner/Base.lproj/LaunchScreen.storyboard。该 Storyboard 内部又通过image nameLaunchImage .../引用资源目录imageset中的图片最终指向Assets.xcassets/LaunchImage.imageset/目录中的图片文件。完整链路为Info.plist (UILaunchStoryboardNameLaunchScreen) → Base.lproj/LaunchScreen.storyboard → Assets.xcassets/LaunchImage.imageset/*.png同时Runner.xcodeproj/project.pbxproj 的PBXResourcesBuildPhase中将LaunchScreen.storyboard与Assets.xcassets均列入资源构建阶段确保两者被打包进Runner.app。LaunchImage.imageset 目录结构剖析当前目录结构如下Runner/Assets.xcassets/LaunchImage.imageset/ ├── Contents.json ├── LaunchImage.png # 1x 基准图当前为 1×1 占位图 ├── LaunchImage2x.png # 2x 高清图当前为 1×1 占位图 ├── LaunchImage3x.png # 3x 超高清图当前为 1×1 占位图 └── README.md # 定制说明文档其中的 Contents.json 是 Xcode Asset Catalog 的清单文件将三张物理图片按设备像素比scale映射为同一个逻辑图片资源{ images : [ { idiom : universal, filename : LaunchImage.png, scale : 1x }, { idiom : universal, filename : LaunchImage2x.png, scale : 2x }, { idiom : universal, filename : LaunchImage3x.png, scale : 3x } ], info : { version : 1, author : xcode } }字段说明字段含义本工程取值idiom目标设备类别universal所有 iOS 设备filename对应图片文件LaunchImage.png/LaunchImage2x.png/LaunchImage3x.pngscale像素密度档位1x非 Retina/2xRetina/3xSuper Retinainfo.version清单格式版本1info.author生成工具xcode当前仓库中的三张占位图均为 1×1 像素68 字节的空白图是 Flutter 模板生成的默认占位资源——这正是需要被替换的对象。LaunchScreen.storyboard 如何引用启动图片LaunchScreen.storyboard 中通过UIImageView展示启动图片关键片段如下imageView opaqueNO clipsSubviewsYES multipleTouchEnabledYES contentModecenter imageLaunchImage translatesAutoresizingMaskIntoConstraintsNO idYRO-k0-Ey4 /imageView两个关键点imageLaunchImage这里的名称必须与 imageset 目录名LaunchImage.imageset保持一致Xcode 据此在 Asset Catalog 中查找对应资源。contentModecenter图片以原始尺寸居中显示不会被拉伸铺满。Storyboard 中通过两条 Auto Layout 约束centerX/centerY将UIImageView固定在屏幕正中。此外Storyboard 的resources段声明了图片的逻辑尺寸width168 height185这是 Flutter 模板预设的参考尺寸当替换图片后实际展示尺寸以新图片为准。由于是center模式若希望图片铺满全屏需要修改contentMode例如改为scaleAspectFill或scaleToFill或改用LaunchScreen.storyboard中的背景色方案当前背景色为纯白red1 green1 blue1。定制方法一直接替换图片文件推荐无需 Xcode按原文档描述最直接的方式是用你自己的启动图替换该目录下的图片文件。操作要点准备三张不同像素密度的图片或至少准备一张2x图LaunchImage.png→ 逻辑尺寸 × 1非 Retina 设备LaunchImage2x.png→ 逻辑尺寸 × 2主流 Retina 设备LaunchImage3x.png→ 逻辑尺寸 × 3高密度设备保持文件名与 Contents.json 中的filename字段完全一致LaunchImage.png、LaunchImage2x.png、LaunchImage3x.png。重新构建运行 iOS 工程系统即会在启动时展示新图片。替换前建议确认图片格式iOS 启动图支持 PNG、JPEG 等常见位图格式工程默认使用 PNG。需要提醒的是当前目录中的占位图是 1×1 空白图若不替换启动画面将显示纯色背景Storyboard 中设置的白色背景因此定制启动画面是每个 Flutter iOS 应用上线前的必要步骤。定制方法二通过 Xcode 可视化操作原文档同时给出了第二种方式——在 Xcode 中拖拽替换操作步骤如下在终端打开工程的 Xcode 工作区open ios/Runner.xcworkspace在 Xcode 左侧Project Navigator中展开Runner→Runner→Assets.xcassets。选中LaunchImage位于LaunchImage.imageset内。将准备好的图片从 Finder 直接拖入Xcode 右侧属性面板中对应的1x、2x、3x插槽。Xcode 会自动完成两件事更新 Contents.json 中的文件名引用并把图片复制进 imageset 目录。这种方式对不熟悉命令行或希望直观预览效果的开发者更为友好。两种方式的等价性与取舍两种方式在原理上是完全等价的——最终都是修改Assets.xcassets/LaunchImage.imageset/目录下的图片文件与清单。区别仅在于操作入口对比维度直接替换文件Xcode 拖拽依赖工具任意文件管理器 / 命令行需要安装 Xcode多倍图管理手动维护三个文件与命名可视化分配到 1x/2x/3x 插槽清单文件更新文件名不变时无需改动由 Xcode 自动维护适合场景CI 脚本、批量替换、版本化控制日常开发、快速预览效果对于插件仓库这类以代码为核心的工程直接替换文件的方式更容易纳入版本控制与自动化流程而 Xcode 可视化方式适合快速迭代设计稿。启动画面定制的实用建议结合示例工程的 Storyboard 与资源结构定制时建议注意保持三档密度齐全虽然系统允许缺失某档位并自动缩放但为保证不同设备上的清晰度建议1x/2x/3x均提供对应尺寸的图片避免 Retina 设备上出现模糊。注意contentModecenter的限制默认居中显示且不缩放若启动图设计为全屏背景需要同步修改 LaunchScreen.storyboard 中UIImageView的contentMode或借助 Auto Layout 约束将图片拉伸至与父视图等宽等高。考虑不同设备屏幕比例Storyboard 启动图会随设备屏幕比例自适应容器使用固定尺寸图片时不同机型可能出现留白建议在设计阶段就考虑安全区与主流屏幕比例。不要混淆启动图与应用图标应用图标由同级的AppIcon.appiconset管理目录结构见 Runner/Assets.xcassets两者职责不同替换时注意区分。启动画面与首帧的衔接在google_maps_flutter示例中Flutter 首帧由 AppDelegate.swift 初始化的引擎渲染该文件同时负责注入 Google Maps API Key启动画面消失后立即进入地图界面因此建议启动图视觉风格与地图界面保持过渡自然。小结LaunchImage.imageset是 Flutter iOS 工程启动画面的核心资源目录通过Contents.json将三档像素密度图片绑定为统一的LaunchImage逻辑资源再由LaunchScreen.storyboard与Info.plist的UILaunchStoryboardName完成系统级装配。替换目录中的图片文件或借助 Xcode 的open ios/Runner.xcworkspace可视化拖拽即可完成定制。本文以google_maps_flutter官方示例工程的真实文件为依据所有路径与配置均可直接在仓库中核对与复用。【免费下载链接】packagesA collection of useful packages maintained by the Flutter team项目地址: https://gitcode.com/GitHub_Trending/pac/packages创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 定制 Google Maps Flutter 示例工程的 iOS 启动画面（Launch Screen）：LaunchImage.imageset 资源替换完全指南
定制 Google Maps Flutter 示例工程的 iOS 启动画面Launch ScreenLaunchImage.imageset 资源替换完全指南【免费下载链接】packagesA collection of useful packages maintained by the Flutter team项目地址: https://gitcode.com/GitHub_Trending/pac/packagesiOS 应用在进程启动、Flutter 引擎完成首帧渲染之前系统会先展示一个由原生层提供的“启动画面”Launch Screen。本文以 Flutter 官方仓库中google_maps_flutter插件示例工程google_maps_flutter_example的 iOS Runner 工程为实例讲解LaunchImage.imageset资源目录的结构、工作原理与两种定制方法直接替换图片文件或通过 Xcode 可视化操作。读完本文你将掌握如何为任何 Flutter iOS 工程替换启动画面资源并理解从Info.plist到LaunchScreen.storyboard再到Assets.xcassets的完整调用链。关联文档与工程位置本文依据的原始文档位于LaunchImage.imageset/README.md该文档位于google_maps_flutter示例应用的 iOS Runner 工程中。整个示例工程通过 example/pubspec.yaml 以路径依赖path: ../的方式直接引用同仓库的google_maps_flutter插件源码是插件官方自带的演示 App其 iOS 工程结构完全遵循 Flutter 官方模板因此本文的方法对任意 Flutter 项目同样适用。iOS 启动画面机制简述iOS 启动画面Launch Screen是 App 被系统拉起后立即显示的静态画面用于掩盖引擎与首帧之间的加载空白期。在 Flutter 工程中这一阶段发生在 Dart VM 初始化与首帧渲染之前因此启动画面必须由 iOS 原生层提供无法用 Flutter Widget 实现。在示例工程的 Info.plist 中可以看到关键声明keyUILaunchStoryboardName/key stringLaunchScreen/stringUILaunchStoryboardName指定了系统在启动时加载的 Storyboard 名称LaunchScreen对应文件为 Runner/Base.lproj/LaunchScreen.storyboard。该 Storyboard 内部又通过image nameLaunchImage .../引用资源目录imageset中的图片最终指向Assets.xcassets/LaunchImage.imageset/目录中的图片文件。完整链路为Info.plist (UILaunchStoryboardNameLaunchScreen) → Base.lproj/LaunchScreen.storyboard → Assets.xcassets/LaunchImage.imageset/*.png同时Runner.xcodeproj/project.pbxproj 的PBXResourcesBuildPhase中将LaunchScreen.storyboard与Assets.xcassets均列入资源构建阶段确保两者被打包进Runner.app。LaunchImage.imageset 目录结构剖析当前目录结构如下Runner/Assets.xcassets/LaunchImage.imageset/ ├── Contents.json ├── LaunchImage.png # 1x 基准图当前为 1×1 占位图 ├── LaunchImage2x.png # 2x 高清图当前为 1×1 占位图 ├── LaunchImage3x.png # 3x 超高清图当前为 1×1 占位图 └── README.md # 定制说明文档其中的 Contents.json 是 Xcode Asset Catalog 的清单文件将三张物理图片按设备像素比scale映射为同一个逻辑图片资源{ images : [ { idiom : universal, filename : LaunchImage.png, scale : 1x }, { idiom : universal, filename : LaunchImage2x.png, scale : 2x }, { idiom : universal, filename : LaunchImage3x.png, scale : 3x } ], info : { version : 1, author : xcode } }字段说明字段含义本工程取值idiom目标设备类别universal所有 iOS 设备filename对应图片文件LaunchImage.png/LaunchImage2x.png/LaunchImage3x.pngscale像素密度档位1x非 Retina/2xRetina/3xSuper Retinainfo.version清单格式版本1info.author生成工具xcode当前仓库中的三张占位图均为 1×1 像素68 字节的空白图是 Flutter 模板生成的默认占位资源——这正是需要被替换的对象。LaunchScreen.storyboard 如何引用启动图片LaunchScreen.storyboard 中通过UIImageView展示启动图片关键片段如下imageView opaqueNO clipsSubviewsYES multipleTouchEnabledYES contentModecenter imageLaunchImage translatesAutoresizingMaskIntoConstraintsNO idYRO-k0-Ey4 /imageView两个关键点imageLaunchImage这里的名称必须与 imageset 目录名LaunchImage.imageset保持一致Xcode 据此在 Asset Catalog 中查找对应资源。contentModecenter图片以原始尺寸居中显示不会被拉伸铺满。Storyboard 中通过两条 Auto Layout 约束centerX/centerY将UIImageView固定在屏幕正中。此外Storyboard 的resources段声明了图片的逻辑尺寸width168 height185这是 Flutter 模板预设的参考尺寸当替换图片后实际展示尺寸以新图片为准。由于是center模式若希望图片铺满全屏需要修改contentMode例如改为scaleAspectFill或scaleToFill或改用LaunchScreen.storyboard中的背景色方案当前背景色为纯白red1 green1 blue1。定制方法一直接替换图片文件推荐无需 Xcode按原文档描述最直接的方式是用你自己的启动图替换该目录下的图片文件。操作要点准备三张不同像素密度的图片或至少准备一张2x图LaunchImage.png→ 逻辑尺寸 × 1非 Retina 设备LaunchImage2x.png→ 逻辑尺寸 × 2主流 Retina 设备LaunchImage3x.png→ 逻辑尺寸 × 3高密度设备保持文件名与 Contents.json 中的filename字段完全一致LaunchImage.png、LaunchImage2x.png、LaunchImage3x.png。重新构建运行 iOS 工程系统即会在启动时展示新图片。替换前建议确认图片格式iOS 启动图支持 PNG、JPEG 等常见位图格式工程默认使用 PNG。需要提醒的是当前目录中的占位图是 1×1 空白图若不替换启动画面将显示纯色背景Storyboard 中设置的白色背景因此定制启动画面是每个 Flutter iOS 应用上线前的必要步骤。定制方法二通过 Xcode 可视化操作原文档同时给出了第二种方式——在 Xcode 中拖拽替换操作步骤如下在终端打开工程的 Xcode 工作区open ios/Runner.xcworkspace在 Xcode 左侧Project Navigator中展开Runner→Runner→Assets.xcassets。选中LaunchImage位于LaunchImage.imageset内。将准备好的图片从 Finder 直接拖入Xcode 右侧属性面板中对应的1x、2x、3x插槽。Xcode 会自动完成两件事更新 Contents.json 中的文件名引用并把图片复制进 imageset 目录。这种方式对不熟悉命令行或希望直观预览效果的开发者更为友好。两种方式的等价性与取舍两种方式在原理上是完全等价的——最终都是修改Assets.xcassets/LaunchImage.imageset/目录下的图片文件与清单。区别仅在于操作入口对比维度直接替换文件Xcode 拖拽依赖工具任意文件管理器 / 命令行需要安装 Xcode多倍图管理手动维护三个文件与命名可视化分配到 1x/2x/3x 插槽清单文件更新文件名不变时无需改动由 Xcode 自动维护适合场景CI 脚本、批量替换、版本化控制日常开发、快速预览效果对于插件仓库这类以代码为核心的工程直接替换文件的方式更容易纳入版本控制与自动化流程而 Xcode 可视化方式适合快速迭代设计稿。启动画面定制的实用建议结合示例工程的 Storyboard 与资源结构定制时建议注意保持三档密度齐全虽然系统允许缺失某档位并自动缩放但为保证不同设备上的清晰度建议1x/2x/3x均提供对应尺寸的图片避免 Retina 设备上出现模糊。注意contentModecenter的限制默认居中显示且不缩放若启动图设计为全屏背景需要同步修改 LaunchScreen.storyboard 中UIImageView的contentMode或借助 Auto Layout 约束将图片拉伸至与父视图等宽等高。考虑不同设备屏幕比例Storyboard 启动图会随设备屏幕比例自适应容器使用固定尺寸图片时不同机型可能出现留白建议在设计阶段就考虑安全区与主流屏幕比例。不要混淆启动图与应用图标应用图标由同级的AppIcon.appiconset管理目录结构见 Runner/Assets.xcassets两者职责不同替换时注意区分。启动画面与首帧的衔接在google_maps_flutter示例中Flutter 首帧由 AppDelegate.swift 初始化的引擎渲染该文件同时负责注入 Google Maps API Key启动画面消失后立即进入地图界面因此建议启动图视觉风格与地图界面保持过渡自然。小结LaunchImage.imageset是 Flutter iOS 工程启动画面的核心资源目录通过Contents.json将三档像素密度图片绑定为统一的LaunchImage逻辑资源再由LaunchScreen.storyboard与Info.plist的UILaunchStoryboardName完成系统级装配。替换目录中的图片文件或借助 Xcode 的open ios/Runner.xcworkspace可视化拖拽即可完成定制。本文以google_maps_flutter官方示例工程的真实文件为依据所有路径与配置均可直接在仓库中核对与复用。【免费下载链接】packagesA collection of useful packages maintained by the Flutter team项目地址: https://gitcode.com/GitHub_Trending/pac/packages创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考