美文网首页大前端开发Flutter
Flutter添加资源和图片(图标、启动页)

Flutter添加资源和图片(图标、启动页)

作者: HuyaRC | 来源:发表于2020-11-26 10:41 被阅读0次

Assets

Flutter中的asset是打包到程序安装包中的,可在运行时访问。常见类型的asset包括静态数据(例如JSON文件),字体,配置文件,图标和图片(JPEG,WebP,GIF,动画WebP / GIF,PNG,BMP和WBMP)。

Flutter使用pubspec.yaml文件(位于项目根目录),来识别应用程序所需的asset。

1 .png
一般直接这样设置,默认加载/images文件夹下所有资源
2.png

该assets部分的Flutter部分指定应包含在应用程序中的文件。 每个asset都通过相对于pubspec.yaml文件所在位置的显式路径进行标识。asset的声明顺序是无关紧要的。asset的实际目录可以是任意文件夹(在本示例中是assets)。

我们通常在应用中会适配几种像素比例的图片,为了就是将逻辑请求asset映射到最接近当前设备像素比例的asset。为了使这种映射起作用,应该根据特定的目录结构来保存asset。

创建图片不同像素比例的文件夹,如图:


3.png

加载图片可以:

Image.asset("assets/images/icon.jpg"),
注意:

图片的名称必须要存在于根目录,默认对应1.0x的分辨率图片。

  • .../icon.png
  • …/2.0x/icon.png
  • …/3.0x/icon.png

pubspec.yaml中asset部分中的每一项都应与实际文件相对应,但主资源项除外。当主资源缺少某个资源时,会按分辨率从低到高的顺序去选择 ,简单来说也就是1.0x中没有的话会在2.0x中找,2.0x中还没有的话就在3.0x中找。

使用默认的 asset bundle 加载资源时,内部会自动处理分辨率。

更新app 图标和启动页

Android
  • 更新app 图标
    在Flutter项目的根目录中,导航到.../android/app/src/main/res。各种位图资源文件夹(如mipmap-hdpi已包含占位符图像”ic_launcher.png”)。 只需按照Android开发人员指南中的说明, 将其替换为所需的资源,并遵守每种屏幕密度的建议图标大小标准。
    4.png
附加:
如果您重命名.png文件,则还必须在您AndroidManifest.xml的<application>标签的android:icon属性中更新名称。
其中android:label="xxx",为应用的名称,可修改。
  • 启动页
    添加启动页到您的Flutter应用程序, 请导航至.../android/app/src/main。在res/drawable/launch_background.xml,通过自定义drawable来实现自定义启动界面。
iOS
  • 更新app 图标
    在你的Flutter项目的根目录中,导航到.../ios/Runner。该目录中Assets.xcassets/AppIcon.appiconset已经包含占位符图片。 只需将它们替换为适当大小的图片。保留原始文件名称即可。


    5.png
  • 启动页
    导航至.../ios/Runner。在Assets.xcassets/LaunchImage.imageset, 拖入图片,并命名为images LaunchImage.png、LaunchImage@2x.png、LaunchImage@3x.png。 如果您使用不同的文件名,那您还必须更新同一目录中的Contents.json文件。

也可以通过打开Xcode完全自定义storyboard。在Project Navigator中导航到Runner/Runner然后通过打开Assets.xcassets拖入图片,或者通过在LaunchScreen.storyboard中使用Interface Builder进行自定义。


6.png

相关文章

网友评论

    本文标题:Flutter添加资源和图片(图标、启动页)

    本文链接:https://www.haomeiwen.com/subject/vkraiktx.html