gpt4 book ai didi

flutter - 向 Flutter 应用程序添加启动画面

转载 作者:IT老高 更新时间:2023-10-28 13:48:12 27 4
gpt4 key购买 nike

您会如何向 Flutter 应用程序添加启动画面?它应该在任何其他内容之前加载和显示。目前,在 Scaffold(home:X) 小部件加载之前会有短暂的颜色闪烁。

最佳答案

我想进一步了解在 Flutter 中制作启动画面的实际方式。

我稍微跟踪了一下 here我发现 Flutter 中的 Splash Screen 看起来并没有那么糟糕。

也许大多数开发者(比如我)认为 Flutter 中默认没有启动画面,他们需要为此做点什么。有闪屏,但是是白底,没有人能理解iOS和Android默认已经有闪屏了。

开发人员唯一需要做的就是将品牌形象放在正确的位置,然后启动画面就会像这样开始工作。

以下是您可以逐步完成的方法:

Android 首创(因为是我最喜欢的平台 :))

  1. 在你的 Flutter 项目中找到“android”文件夹。

  2. 浏览到 app -> src -> main -> res 文件夹,并将品牌形象的所有变体放在相应的文件夹中。例如:

  • 密度为1的图片需要放在mipmap-mdpi中,
  • 密度为1.5的图片需要放在mipmap-hdpi中,
  • 密度为2的图片需要放在mipmap-xhdpi中,
  • 密度为3的图片需要放在mipmap-xxhdpi中,
  • 密度为4的图片需要放在mipmap-xxxhdpi中,

默认情况下,android 文件夹中没有drawable-mdpi、drawable-hdpi 等,但我们可以根据需要创建它们。由于这个事实,图像需要放在 mipmap 文件夹中。此外,关于 Splash 屏幕(在 Android 中)的默认 XML 代码将使用 @mipmap,而不是 @drawable 资源(您可以根据需要更改它)。

  1. Android 上的最后一步是取消对 drawable/launch_background.xml 文件中一些 XML 代码的注释。浏览到 app -> src -> main -> res-> drawable 并打开 launch_background.xml。在这个文件中,你会看到为什么斜线屏幕背景是白色的。要应用我们在步骤 2 中放置的品牌形象,我们必须取消注释您的 launch_background.xml 文件中的一些 XML 代码。修改后的代码应该是这样的:

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

    <item>

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

    </item>

请注意我们注释了白色背景的 XML 代码并取消了关于 mipmap 图像的代码的注释。如果有人感兴趣,文件launch_background.xml 将用于styles.xml 文件中。

iOS 次之:

  1. 在你的 Flutter 项目中找到“ios”文件夹。

  2. 浏览到 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 上运行您的应用时,您应该拥有带有您添加的品牌形象的正确启动画面。

谢谢

关于flutter - 向 Flutter 应用程序添加启动画面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43879103/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com