flutter中如何设置启动画面(splash screen)?

码云
2020-11-23 10:02

其实设置启动图只需要将启动图片放到对应的目录再稍加配置即可,具体的操作方式如下:

 

  • 安卓平台

1)找到flutter工程下的android目录

2)找到app -> src -> main -> res 目录并把启动图片放到对应的目录下(如果目录不存在则创建)

     mipmap-mdpi/ 目录下放1倍清晰度的启动图片,如:48*48

     mipmap-hdpi/ 目录下放1.5倍清晰度的启动图片,如:72*72

     mipmap-xdpi/ 目录下放2倍清晰度的启动图片,如:96*96

     mipmap-xxdpi/ 目录下放3倍清晰度的启动图片,如:144*144

     mipmap-xxxdpi/ 目录下放4倍清晰度的启动图片,如:192*192

3)  最后一步我们需要修改app/src/main/res/drawable/launch_background.xml文件中的配置,修改后的内容如下:

 <!--<item android:drawable="@android:color/white" />-->

 <item>

     <bitmap
         android:gravity="center"
         android:src="@mipmap/findsrc" />

 </item>

其中findsrc改为你自己的启动图的名称(不带后缀)。

 

  • ios平台

1) 找到flutter工程下的ios目录

2) 找到Runner -> Assets.xcassets -> LaunchImage.imageset

3)放置图片

     1 倍清晰度图片LaunchImage.png 

     2 倍清晰度图片LaunchImage@2x.png 

     3 倍清晰度图片LaunchImage@3x.png 

     4 倍清晰度图片LaunchImage@4x.png 

 4)修改目录下的Contents.json,内容如下:

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

 

重新启动app,你就可以看到启动图了。

全部评论

相关文章