flutter项目的ios版本中怎么设置启动画面

概述

这个问题经常看到有同学在问,那么我们今天分享下怎么在flutter项目中设置ios的启动画面。

在ios中设置启动画面有两种方法,一种是采用StoryBoard设置,一种是直接采用图片设置,下面来看下两种方案。

  • 打开工程文件

flutter项目的ios版本中怎么设置启动画面_第1张图片

打开ios项目下的XXX.xcworkspace文件

  • 选择项目设置

flutter项目的ios版本中怎么设置启动画面_第2张图片

针对App Icons and Launch Images 设置,这里在默认情况下是使用了StoryBoard, StoryBoard是ios中的ui可视化设计,在项目文件夹中可以找到

flutter项目的ios版本中怎么设置启动画面_第3张图片

点击打开

flutter项目的ios版本中怎么设置启动画面_第4张图片

注意左边的菜单,在下面的操作中一定要选择LaunchImage

  • 在项目中新增启动图片

flutter项目的ios版本中怎么设置启动画面_第5张图片

这里直接将图片拖动到项目根目录下,注意必须是根目录,不能是其他文件夹,否则图片出不来。

flutter项目的ios版本中怎么设置启动画面_第6张图片

选择Copy Items if needed

这个时候,我们加入的资源已经可以选择了

flutter项目的ios版本中怎么设置启动画面_第7张图片

选择之后的效果如下:

flutter项目的ios版本中怎么设置启动画面_第8张图片

这里的效果我们调整一下。先把这个图片剪切掉,然后粘贴一下,这样,中间的十字线就没有了。(实际上是清除了本图片的约束),
约束是ios界面编辑很重要的一个特性,类似于前端的css或者java的布局,这里稍微给不熟悉ios的同学解释下。

flutter项目的ios版本中怎么设置启动画面_第9张图片

编辑图片的约束,让它变成全屏幕:

点击屏幕右下角的约束编辑器
flutter项目的ios版本中怎么设置启动画面_第10张图片

flutter项目的ios版本中怎么设置启动画面_第11张图片

上面4个箭头的地方全部变成0,在点击下面的"Add 4 Constraints'

flutter项目的ios版本中怎么设置启动画面_第12张图片
属性这里的Content Mode改成Scal to Fill。

flutter项目的ios版本中怎么设置启动画面_第13张图片

这样就好看多了,运行一下:

!
flutter项目的ios版本中怎么设置启动画面_第14张图片

你可能感兴趣的:(flutter项目的ios版本中怎么设置启动画面)