flutter工程设置ios启动图

flutter工程设置ios启动图

  1. 用Xcode 打开flutter工程中的iOS模块,依次点击 Runner - Runner - Assets.xcassets,然后点击右侧的LunchImage,如下图:
    flutter工程设置ios启动图_第1张图片

  2. 将启动图片复制成3份,分别命名为LaunchImage.png,[email protected][email protected](此处图片尺寸不限,也可以用3张不同尺寸的图片,当然图片尺寸要自己把握好),然后将这3张图片依次拖到上图的1x, 2x, 3x 处,效果如下图:
    flutter工程设置ios启动图_第2张图片

  3. 双击左侧的LanchScreen.storyboard,查看其动图的效果,如下图,可以看到图片在屏幕中心,没有填满整个屏幕,还要继续设置。
    flutter工程设置ios启动图_第3张图片

  4. 设置图片约束,操作步骤如下,
    flutter工程设置ios启动图_第4张图片

  5. 设置完约束后,图片仍然在中心。点击左侧的 View Controller Scene - View Controller - View - LaunchImage, 修改右侧的属性 Content Mode 为 Scale to Fill(此处需要考虑图片拉伸变形等情况,选择合适的属性,如Aspect Fill等,适合自己的才是最好的),此时图片放大了,但是上下仍有两部分未填满,如下图:

flutter工程设置ios启动图_第5张图片

  1. 点击左侧约束Contrains下的LaunchImage.top = Top Layout Guide.bottom,修改右侧的属性 second item 为 superview.Top, Constraint 为 0;点击 Bottom Layout Guide.top = LaunchImage.bottom,修改右侧的属性 first item 为 superview.Bottom, Constraint 为 0。此时,启动图片填充整个屏幕,如下图:
    flutter工程设置ios启动图_第6张图片

你可能感兴趣的:(flutter工程设置ios启动图)