1、assets概念
Flutter APP的安装包中会包含代码和assets（资源），assets会被打包到程序安装包中，包含在应用中会使用到的静态文件，如图片、字体文件、配置文件；这些文件不是由dart代码动态生成的，而是预先准备好的资源，合理利用可以减小应用的大小，提高加载效率。
2、指定assets
assets的管理也是在 pubspec.yaml文件中进行管理的，示例如下。
flutter:assets:- assets/bg1.png- assets/touxiang.jpg
3、assets变体
在Flutter中，我们有时需要为同一资产提供多个变体，用来应对不同的场景或设备分辨率。比如在不同设备上有不同的背景图。
- 这样引入，那这两个文件都会被包含在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: trueassets:- 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> {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> {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”)
- …/touxiang/1.5x/touxiang.png
- …/touxiang/2.0x/touxiang.png
- …etc
加载图像代码：
- AssetImage(“touxiang/touxiang.png”, package: “touxiang”)
- Image.asset(“touxiang/touxiang.png”, package: “touxiang”)
