Flutter 启动页适配

时间:2024-04-05 14:21:00

参考文章

Flutter 开发 Android & IOS 启动页 splash pag
Flutter 启动页(闪屏页)具体实现和原理分析
Flutter启动流程和原理分析

需要知道的

  1. iOS13 开始 苹果要放弃LaunchImage适配启动图 , 改为必须走LaunchScreen.sb来启动
    所以在iOS端,启动图适配,要么使用LaunchScreen.sb 内嵌UIImageView +AutoLayout 来适配(依旧使用整图), 要么就采用 页面布局的方式, 来开发启动页,具体可以参考下面这个链接
    iOS 13使用LaunchScreen.storyboard适配各尺寸启动图

  2. Flutter 的启动顺序,或者说是启动过程
    iOS和Android端的原理其实是一样的, Android的MainActivity继承了FlutterActivity,FlutterActivity又通过FlutterActivityDelegate实现了生命周期的代理, 就是创建一个View并通过MainActivity的onCreate方法去加载显示出来,
    同样的, iOS端也在AppDelegate中处理, AppDelegate: FlutterAppDelegate

所以总结来说, Flutter 的启动顺序依然和RN 一样, 先是各自从原生的Launch启动, 这一部分是iOS/Android原生处理,属于冷启动过程(机器不行就会等待较长时间), 还没有涉及到Flutter部分, 如果不做处理,将会有白屏或者黑屏短暂出现,
直到到Flutter层页面被加载出来, 此时启动就算结束了

  1. Flutter 接管后, 是否需要一个Flutter层面的启动页?
    一般来说,Flutter确实需要这么一个Flutter层面的启动页,
    从刚才的原生层启动后, 按道理就是进入Flutter页面了,内容也都呈现了 为什么说通常意义还需要一个Flutter层面的启动页呢?
    这是因为,一般我们需要在Flutter层面做一些同步耗时的操作, 比如两步认证/token验证/App状态检测等等, 有一个启动页帮助我们缓冲一下,相对比较合适…

举个例子(不算恰当), App登录已超时,如果App启动后直接进入首页, 然后由于某些原因必须退出到登录页, 这样的交互显的不那么完美, 最好的是在启动前,就能从接口处得知登录状态, 若登录失效,就直接进入登录页面,未失效就直接进入首页进行业务处理,
所以,请求的过程放到Flutter的启动页, 会显得比较合适

  1. 由于iOS的冷启动采用页面布局的方式实现(放弃LaunchImage的图片适配方式), 建议Flutter层面的启动页面, 也通过页面布局方式(偷懒就丢一整张图)
    这样适配起来可控, 能做到肉眼不可查, 放图片的话,又是要进行图片的适配,反而麻烦

Start Start Start Start Start Start Start

iOS原生启动

图片

Flutter 启动页适配
Flutter 启动页适配
Flutter 启动页适配
Flutter 启动页适配
iOS端冷启动页面比较简单,就在LaunchScreen.sb中放一个UIImageView, 做好约束就可以了,我这边因为启动页比较简单, 就让UI切一张图即可,背景色到时候改成白色基本就看不出来了

Android 原生启动

Flutter阶段启动图

先下班…