注册
登录
flutter
向Flutter应用程序添加启动屏幕
返回
向Flutter应用程序添加启动屏幕
作者:
狗头军师
发布时间:
2023-11-19 12:28:14 (5月前)
您如何处理向Flutter应用添加初始屏幕?它应该先加载并显示任何其他内容。当前,在加载Scaffold(home:X)小部件之前,会短暂闪烁一下颜色。
收藏
举报
2 条回复
1#
回复此人
v-star*위위
|
2020-08-12 14-32
我想在Flutter中更详细地介绍启动屏幕的实际方法。 我跟踪了一下这里的痕迹,发现Flutter中的“启动画面”看起来还不错。 也许大多数开发人员(像我一样)都认为Flutter默认没有Splash屏幕,因此他们需要为此做些事情。有一个启动屏幕,但背景为白色,没有人能理解默认情况下已经存在适用于iOS和Android的启动屏幕。 开发人员唯一需要做的就是将品牌形象放在正确的位置,初始屏幕将按此开始工作。 您可以按以下步骤进行操作: 首先在Android上使用(因为这是我最喜欢的平台:)) 在Flutter项目中找到“ android”文件夹。 浏览至应用程序-> src->主菜单-> res文件夹,然后将品牌形象的所有变体放入相应的文件夹中。例如: 需要将密度为1的图像放置在mipmap-mdpi中, 需要将密度为1.5的图像放置在mipmap-hdpi中, 需要将密度为2的图像放置在mipmap-xdpi中, 需要将密度为3的图像放置在mipmap-xxdpi中, 需要将密度为4的图像放置在mipmap-xxxdpi中, 默认情况下,android文件夹中没有drawable-mdpi,drawable-hdpi等,但是我们可以根据需要创建它们。因此,需要将图像放置在mipmap文件夹中。同样,有关“启动画面”的默认XML代码(在Android中)将使用@mipmap,而不是@drawable资源(如果需要,可以更改它)。 Android的最后一步是取消注释drawable / launch_background.xml文件中的某些XML代码。浏览到app-> src-> main-> res-> drawable,然后打开launch_background.xml。在此文件中,您将看到为什么Slash屏幕背景为白色。要应用我们在步骤2中放置的品牌形象,我们必须取消注释launch_background.xml文件中的某些XML代码。更改后,代码应如下所示: ```
``` 请注意,我们注释了白色背景的XML代码,并且取消了有关mipmap图像的代码注释。如果有人感兴趣,可以在styles.xml文件中使用launch_background.xml文件。 在iOS上排名第二: 在Flutter项目中找到“ ios”文件夹。 浏览到Runner-> Assets.xcassets-> LaunchImage.imageset。应该有LaunchImage.png,LaunchImage @ 2x.png等。现在您必须将这些图像替换为品牌图像变体。例如: 密度为1的图像需要覆盖LaunchImage.png, 密度为2的图像需要覆盖LaunchImage@2x.png, 密度为3的图像需要覆盖LaunchImage@3x.png, 密度为4的图像需要覆盖LaunchImage@4x.png, 如果我没有记错的话,默认情况下不存在LaunchImage@4x.png,但是您可以轻松创建一个。如果LaunchImage@4x.png不存在,则还必须在Contents.json文件中声明它,该文件与图像位于同一目录中。更改后,我的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" } } ``` 那应该是您所需要的,下次在Android或iOS上运行您的应用程序时,您应该拥有带有添加的品牌形象的正确的启动画面。
编辑
登录
后才能参与评论