Flutter APP安装包中会包含代码和assets(资源)两部分.Assets是会被打包到程序安装包中的,可在运行时访问.常见类型的assets包括静态数据(例如json文件),配置文件,图标和图片(JPEG,WebP,GIF,动画WebP/GIF,PNG,BMP和WEMP)等
指定assets
和包管理一样,Flutter也是有pubspec.yaml
文件来管理应用程序所需的资源,举个例子:
flutter:
assets:
- assets/my_icon.png
- assets/background.png
复制代码
assets指定应包含在应用程序中的文件, 每个asset都通过相对于pubspec.yaml文件所在的文件系统路径来标识自身的路径。asset的声明顺序是无关紧要的,asset的实际目录可以是任意文件夹(在本示例中是assets文件夹)。
加载文本assets
- 通过
rootBundle
对象加载:每个Flutter应用程序都有一个rootBundle
对象, 通过它可以轻松访问主资源包,直接使用package:flutter/services.dart
中全局静态的rootBundle
对象来加载asset
即可。 - 通过
DefaultAssetBundle
加载:建议使用DefaultAssetBundle
来获取当前BuildContext
的AssetBundle
。 这种方法不是使用应用程序构建的默认asset bundle
,而是使父级widget在运行时动态替换的不同的AssetBundle
,这对于本地化或测试场景很有用。
通常,可以使用DefaultAssetBundle.of()
在应用运行时来间接加载asset
(例如JSON文件),而在widget上下文之外,或其它AssetBundle
句柄不可用时,可以使用rootBundle
直接加载这些asset
,例如:
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
return await rootBundle.loadString('assets/config.json');
}
复制代码
加载图片
类似于原生开发,Flutter也可以为当前设备加载适合其分辨率的图像。
声明分辨率相关的图片 assets
AssetImage
可以将asset的请求逻辑映射到最接近当前设备像素比例(dpi)的asset。为了使这种映射起作用,必须根据特定的目录结构来保存asset:
…/image.png
…/Mx/image.png
…/Nx/image.png
…etc.
复制代码
其中M和N是数字标识符,对应于其中包含的图像的分辨率,也就是说,它们指定不同设备像素比例的图片。
主资源默认对应于1.0倍的分辨率图片。看一个例子:
…/my_icon.png
…/2.0x/my_icon.png
…/3.0x/my_icon.png
复制代码
在设备像素比率为1.8的设备上,.../2.0x/my_icon.png
将被选择。对于2.7的设备像素比率,.../3.0x/my_icon.png
将被选择。
如果未在Image widget
上指定渲染图像的宽度和高度,那么Image widget
将占用与主资源相同的屏幕空间大小。 也就是说,如果.../my_icon.png
是72px乘72px,那么.../3.0x/my_icon.png
应该是216px乘216px; 但如果未指定宽度和高度,它们都将渲染为72像素×72像素(以逻辑像素为单位)。
pubspec.yaml
中asset部分中的每一项都应与实际文件相对应,但主资源项除外。当主资源缺少某个资源时,会按分辨率从低到高的顺序去选择 ,也就是说1x中没有的话会在2x中找,2x中还没有的话就在3x中找。
加载图片
要加载图片,可以使用 AssetImage
类。例如,我们可以从上面的asset声明中加载背景图片:
Widget build(BuildContext context) {
return new DecoratedBox(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('graphics/background.png'),
),
),
);
}
复制代码
注意,AssetImage
并非是一个widget, 它实际上是一个ImageProvider
,有些时候你可能期望直接得到一个显示图片的widget,那么你可以使用Image.asset()
方法,如:
Widget build(BuildContext context) {
return Image.asset('graphics/background.png');
}
复制代码
使用默认的 asset bundle
加载资源时,内部会自动处理分辨率等,这些处理对开发者来说是无感知的。 (如果使用一些更低级别的类,如 ImageStream
或 ImageCache
时你会注意到有与缩放相关的参数)
特定平台 assets
上面的资源都是flutter应用中的,这些资源只有在Flutter框架运行之后才能使用,如果要给我们的应用设置APP图标或者添加启动图,那我们必须使用特定平台的assets。
设置APP图标
更新Flutter应用程序启动图标的方式与在本机Android或iOS应用程序中更新启动图标的方式相同。
- Android
在Flutter项目的根目录中,导航到.../android/app/src/main/res
目录,里面包含了各种资源文件夹(如mipmap-hdpi
已包含占位符图像“ic_launcher.png
”)。 只需按照Android开发人员指南中的说明, 将其替换为所需的资源,并遵守每种屏幕密度(dpi)的建议图标大小标准。
注意: 如果您重命名.png文件,则还必须在您
AndroidManifest.xml
的标签的android:icon属性中更新名称。
- iOS
在Flutter项目的根目录中,导航到.../ios/Runner
。该目录中Assets.xcassets/AppIcon.appiconset
已经包含占位符图片, 只需将它们替换为适当大小的图片,保留原始文件名称。
更新启动页
在Flutter框架加载时,Flutter会使用本地平台机制绘制启动页。此启动页将持续到Flutter渲染应用程序的第一帧时。
- Android
要将启动屏幕(splash screen)添加到您的Flutter应用程序, 请导航至.../android/app/src/main
。在res/drawable/launch_background.xml
,通过自定义drawable来实现自定义启动界面(你也可以直接换一张图片)。
- iOS
要将图片添加到启动屏幕(splash screen)的中心,请导航至…/ios/Runner。在Assets.xcassets/LaunchImage.imageset
, 拖入图片,并命名为LaunchImage.png、LaunchImage@2x.png、LaunchImage@3x.png。 如果你使用不同的文件名,那您还必须更新同一目录中的Contents.json文件,图片的具体尺寸可以查看苹果官方的标准。
您也可以通过打开Xcode完全自定义storyboard。在Project Navigator
中导航到Runner/Runner
然后通过打开Assets.xcassets
拖入图片,或者通过在LaunchScreen.storyboard
中使用Interface Builder
进行自定义