★ FEATURED ARTICLE 移动开发教育【免费下载链接】HistoryOfEverythingFlutter Launch Timeline Demo项目地址https://gitcode.com/gh_mirrors/hi/HistoryOfEverything点击查看免费下载本文以 app/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md 为核心结合 HistoryOfEverythingFlutter Launch Timeline Demo仓库中 iOS 启动屏相关源码与配置系统讲解 Flutter 工程中 iOS Launch Screen 的组成结构、两种自定义替换方式、底层 storyboard 与 Info.plist 关联机制以及 Android 侧启动屏的对照实现。读完本文你可以独立完成 Flutter iOS 启动屏图片的替换、验证与常见问题排查。一、关联文档说了什么启动屏自定义的两种入口仓库中LaunchImage.imageset目录下的 README.md 是 Xcode 生成模板自带的说明文件内容虽短但给出了自定义 iOS 启动屏的两种等价方式直接替换图片文件将你自己设计的启动图Launch Screen Assets放入该目录覆盖LaunchImage.png、LaunchImage2x.png、LaunchImage3x.png三个文件。通过 Xcode 拖拽替换在终端执行open ios/Runner.xcworkspace打开 Flutter 工程的 Xcode 工作区在 Project Navigator 中选择Runner/Assets.xcassets将目标图片直接拖入LaunchImage.imageset对应的插槽。这两种方式最终修改的是同一个 Contents.json 与同一组图片文件区别只是操作入口不同。本文将分别给出两者的详细步骤并深入解析其背后的配置文件。二、LaunchImage.imageset 资源集结构解析LaunchImage.imageset是 Xcode Asset Catalog资源目录中的一个 image set其目录结构在仓库中如下app/ios/Runner/Assets.xcassets/LaunchImage.imageset/ ├── Contents.json # 资源目录描述文件 ├── LaunchImage.png # 1x 档位 ├── LaunchImage2x.png # 2x 档位 └── LaunchImage3x.png # 3x 档位Contents.json 的 scale 三档机制Contents.json 声明了该 image set 包含三张图片均由idiom标记为universal通用设备按屏幕密度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 } }关键字段说明字段值含义idiomuniversal不区分 iPhone / iPad所有设备通用scale1x/2x/3x分别对应非 Retina、2 倍 Retina、3 倍 Retina 屏filename对应 PNG 文件名Xcode 按当前设备密度自动选择对应文件info.version/info.author1/xcodeAsset Catalog 描述文件版本信息替换时需要注意三个 scale 档位最好同时提供否则在缺少对应密度档位的设备上可能出现图缺失或系统回退到其他档位的情况。模板默认占位图的事实从仓库文件列表可以确认模板自带的LaunchImage.png、LaunchImage2x.png、LaunchImage3x.png三张图均为1×1 像素、约 68 字节的空白 PNG 占位图。这意味着在未自定义前iOS 启动屏显示的是一个近乎全透明的占位图片视觉效果上主要呈现 LaunchScreen.storyboard 中设置的白色背景——这也正是本文要教你替换掉的部分。三、方式一直接替换图片文件命令行 / 文件管理器这是最直接、不依赖 Xcode 的方式适合脚本化批量处理或 CI 场景准备三张不同密度的启动图建议尺寸见下文“设计与尺寸建议”一节按相同宽高比设计。分别覆盖仓库中的三张文件app/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.pngapp/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage2x.pngapp/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage3x.png确认文件名与 Contents.json 中filename字段完全一致大小写敏感。重新构建并运行 iOS 应用启动屏即生效。如果只是快速验证效果也可以只替换单张图但为了所有设备上的显示质量仍建议三档齐备。四、方式二通过 Xcode 工作区拖拽替换README 给出的第二种方式适合在开发阶段可视化操作在终端执行open ios/Runner.xcworkspaceRunner.xcworkspace位于 app/ios/Runner.xcworkspace是包含 Flutter 插件 Pod 依赖的完整工作区。需要留意该目录下还包含xcshareddata/WorkspaceSettings.xcsettings等工作区共享配置。在 Xcode 的 Project Navigator 中展开Runner→Assets.xcassets→LaunchImage。选中LaunchImageUniversal 三个插槽将准备好的图片拖入对应 slot1x / 2x / 3xXcode 会自动重命名文件并更新 Contents.json 的filename字段。通过 Xcode 或flutter run启动应用验证效果。无论用哪种方式最终产物都是“图片文件 Contents.json 引用关系”保持一致两种方式可以按场景混用。五、底层机制LaunchScreen.storyboard 与 Info.plist 的关联5.1 UILaunchStoryboardName 指定启动画面app/ios/Runner/Info.plist 中通过以下键值声明了启动画面的故事板keyUILaunchStoryboardName/key stringLaunchScreen/string即iOS 在应用启动时加载名为LaunchScreen的故事板对应文件 LaunchScreen.storyboard该故事板在启动阶段渲染为窗口内容直至应用首帧画面接管。这是 iOS 启动屏旧称 Launch Screen的核心注册点也是我们替换图片后能生效的前提。5.2 LaunchScreen.storyboard 中的 imageView 与约束LaunchScreen.storyboard 是 Interface Builder 生成的 XML 描述文件其中与启动图直接相关的关键片段如下view keyview contentModescaleToFill ... subviews imageView opaqueNO clipsSubviewsYES multipleTouchEnabledYES contentModecenter imageLaunchImage translatesAutoresizingMaskIntoConstraintsNO ... /imageView /subviews color keybackgroundColor red1 green1 blue1 alpha1 colorSpacecustom customColorSpacesRGB/ constraints constraint firstItemYRO-k0-Ey4 firstAttributecenterX secondItemZe5-6b-2t3 secondAttributecenterX .../ constraint firstItemYRO-k0-Ey4 firstAttributecenterY secondItemZe5-6b-2t3 secondAttributecenterY .../ /constraints /view从该 XML 可以提炼出以下实现事实启动屏视图内只有一个imageView其image属性直接引用名为LaunchImage的资源与LaunchImage.imageset一一对应。contentModecenter图片按原始像素尺寸居中显示不会被拉伸缩放。因此若替换图片过大可能被裁切或显示不完整图片过小则会显得“很小地”悬浮在屏幕中央。两个 Auto Layout 约束将 imageView 水平、垂直方向都约束在父视图中心centerX/centerY保证图片永远居中。背景色为纯白red1 green1 blue1sRGB 色彩空间这也是默认启动屏看起来是白底的原因。文件末尾的image nameLaunchImage width168 height185/是 storyboard 编译时对资源的逻辑引用尺寸仅供参考实际渲染尺寸以资源文件为准。结论当前仓库的启动屏是一个“白色背景 居中原图显示”的布局。如果你的设计图需要铺满全屏或等比缩放需要修改contentMode例如改为scaleAspectFill并相应调整约束——这属于 storyboard 层面的二次定制已超出本文替换资源的范围但理解这一点能避免“替换后图片位置/大小不对”的困惑。六、替换时的设计与尺寸建议基于1x / 2x / 3x三档机制与contentModecenter的约束替换时建议遵循以下原则三张图内容必须一致仅分辨率不同保持相同宽高比避免 2x / 3x 档位显示比例跳变。建议按主流设备尺寸准备3x 档对应约 1242×2688 及以上当前旗舰 iPhone 的逻辑分辨率2x 档对应约 750×13341x 档对应约 375×667 逻辑点换算的像素值图片本身像素分辨率取 2x/3x 档位的整数倍即可。由于是居中且不缩放显示请将视觉重心放在画面中央区域并预留安全区域避免刘海屏下被遮挡。导出 PNG 时避免使用过大的透明留白否则替换后图片在视觉上会显得偏小。保持文件名精确匹配 Contents.json 中的filename字段避免资源引用失效。七、延伸对照Android 侧启动屏的实现理解 iOS 启动屏后可以对照同仓库的 Android 实现两者设计思路一致在 Flutter 首帧前显示原生层画面app/android/app/src/main/res/drawable/launch_background.xml 定义了启动屏图层列表默认白色背景并预留了插入自定义位图的注释示例android:gravitycentermipmap/launch_image。app/android/app/src/main/res/values/styles.xml 中LaunchTheme通过android:windowBackground指向drawable/launch_background注释说明“启动屏会在 Flutter 绘制出第一帧时自动移除”。app/android/app/src/main/AndroidManifest.xml 中MainActivity的android:themestyle/LaunchTheme与meta-data android:nameio.flutter.app.android.SplashScreenUntilFirstFrame android:valuetrue/共同保证“窗口背景保持显示直到 Flutter 渲染出第一帧”。可以看出iOS 端LaunchScreen.storyboard LaunchImage.imageset与 Android 端LaunchTheme launch_background.xml是 Flutter 模板在双端的对应机制都是原生层先呈现一张静态画面再由 Flutter 首帧接管。做跨平台启动屏统一时需要同步维护这两处配置。八、验证与常见问题排查完成替换后可通过以下方式验证冷启动应用杀掉进程后重新启动观察启动瞬间是否出现新的启动图若使用 Xcode 运行可在 Debug 菜单中查看LaunchScreen相关日志检查 Xcode 构建产物中Contents.json引用的文件名与实际文件是否一致。常见问题与排查方向现象可能原因排查/解决替换后仍显示旧图未清理构建缓存或只替换了部分 scale 档位执行flutter clean后重新构建补齐三档图片图片被拉伸或变形误改了 storyboard 的contentMode或约束恢复contentModecenter或按需改为scaleAspectFit图片显示很小图片像素尺寸低于屏幕密度档位按 2x/3x 档位提供足够分辨率图片不显示白屏文件名与 Contents.json 不匹配资源引用失效核对 Contents.json 的filename修改了图片但未生效应用未冷启动或 Xcode 未重新拷贝资源完整冷启动应用必要时删除模拟器/真机上的旧安装包九、总结围绕 LaunchImage.imageset/README.md 给出的两种自定义方式本文完整梳理了 HistoryOfEverything 仓库中 iOS 启动屏的配置文件链路图片文件与 Contents.json 的 scale 三档对应关系 → LaunchScreen.storyboard 的居中约束与contentModecenter渲染行为 → Info.plist 中UILaunchStoryboardName的注册机制并对照了 Android 端 launch_background.xml 与 styles.xml 的等价实现。掌握这些你就能像替换仓库默认占位图一样在任何 Flutter 工程中快速完成 iOS 启动屏的自定义与问题排查。赞分享移动开发教育【免费下载链接】HistoryOfEverythingFlutter Launch Timeline Demo项目地址https://gitcode.com/gh_mirrors/hi/HistoryOfEverything点击查看免费下载相关推荐Flutter iOS 启动屏资源LaunchImage自定义指南——以 dart_simple_live 项目为例Flutter iOS 启动屏资源LaunchImage自定义指南——以 dart_simple_live 项目为例 本指南围绕 dart_simple_l音视频直播Flutter iOS 启动屏素材定制指南以 flutter_architecture_samples 的 LaunchImage 模板为例Flutter iOS 启动屏素材定制指南以 flutter_architecture_samples 的 LaunchImage 模板为例 导读 本篇指南围示例工程Flutter iOS 启动屏Launch Screen自定义指南以 camera_avfoundation 示例工程为例Flutter iOS 启动屏Launch Screen自定义指南以 camera_avfoundation 示例工程为例 本文是一份面向 Flutter移动开发跨平台创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
