Flutter资源管理（四）
1、assets概念Flutter APP的安装包中会包含代码和assets（资源），assets会被打包到程序安装包中，包含在应用中会使用到的静态文件，如图片、字体文件、配置文件；这些文件不是由dart代码动态生成的，而是预先准备好的资源，合理利用可以减小应用的大小，提高加载效率。
2、指定assets
assets的管理也是在 pubspec.yaml文件中举行管理的，示例如下。
flutter:
assets:
- assets/bg1.png
- assets/touxiang.jpg
https://i-blog.csdnimg.cn/img_convert/86705400db21bc99db9373fefd40a687.png
3、assets变体
在Flutter中，我们有时必要为同一资产提供多个变体，用来应对不同的场景或设备分辨率。比如在不同设备上有不同的背景图。
https://i-blog.csdnimg.cn/img_convert/2aea3631615f86b357ffc4ac8a4960a7.png
[*]如许引入，那这两个文件都会被包含在assets bundle中。在assets目次下的被以为是 _main asset _（主资源），在pc目次下的被以为是一种变体（variant）。
4、文本的加载
4.1 通过rootBundle对象
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
return await rootBundle.loadString("assets/config.json");
}
4.2 通过DefaltAssetBundle
[*]pubspec.yaml
flutter:
uses-material-design: true
assets:
- assets/text/sample.txt
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
final String data = await rootBundle.loadString('assets/sample.txt');
runApp(MyApp(sampleText: data));
}
5、图片的加载
5.1 声明分辨率相干的图片
AssetImage可以将asset的请求逻辑映射到最接近当前设备像素的asset，在像素比率为1.7的设备上，…/2.0x/image.png将被选择，对于比率为2.8的设备，…/3.0x/image.png将被选择。如果缺少某个资源，会按照分辨率从低到高的顺序寻找；接纳以下目次结构举行保存。
[*]…/image.png
[*]…/2.0x/image.png
[*]…/3.0x/image.png
5.2 加载图片
5.2.1 AssetImage
对代码举行修改，体现在首页的背景图片。
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: const Stack(
children: [
// 添加背景图片
Positioned.fill(
child: DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/imgs/bg1.png"),
fit: BoxFit.cover,
),
),
),
),
],
),
);
}
}
[*]stack：答应在同一个空间内重叠多个子widget；
[*]Positioned.fill：确保widget填充整个可用空间；
[*]DecoratedBox：修饰其子widget；
[*]DecorationImage：DecoratedBox的一部门用来装饰图像；
[*]AssetImage：从应用资产中加载；
[*]BoxFit.cover：表现图像被拉伸用来填充整个装饰区域。
5.2.2 AssetImage
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: const Stack(
children: [
Image.asset(
"assets/imgs/bg1.png",
fit: BoxFit.cover, // 设置图像填充方式
width: MediaQuery.of(context).size.width, // 设置图像的宽
height: MediaQuery.of(context).size.height, // 设置图像的高
),
],
),
);
}
}
5.3 加载依赖包中的资源图片
如果程序依赖于touxiang包，它的文件目次如下：
[*]…/pubspec.yaml
[*]…/touxiang/touxiang.png
[*]…/touxiang/1.5x/touxiang.png
[*]…/touxiang/2.0x/touxiang.png
[*]…etc
加载图像代码：
[*]AssetImage(“touxiang/touxiang.png”, package: “touxiang”)
[*]Image.asset(“touxiang/touxiang.png”, package: “touxiang”)
6、更改默认资源
6.1 APP图标
[*]Andriod
https://i-blog.csdnimg.cn/img_convert/2a7c901f20b7ef86281c0ddab78ba418.png
[*]IOS
https://i-blog.csdnimg.cn/img_convert/48f16295bf27072eb6928771c9b74972.png
遵照相应的屏幕密度，将其替换为所必要的资源即可。
6.2 启动页
加载Flutter框架时，Flutter会使用本地平台机绘制启动页，直到Flutter渲染应用程序，如果不在main()中调用runApp函数，那么启动屏幕将连续体现。
[*]Andriod
https://i-blog.csdnimg.cn/img_convert/36ba070d9eb2e80f3ddfb994ce53408f.png
可以使用xml绘制启动页，或者直接更换一张图片
[*]IOS
https://i-blog.csdnimg.cn/img_convert/5ab4192befb6835314657935a3d4f409.png
将图片改为这三个名称并根据苹果官方的标准放入图片。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]