IT评测·应用市场-qidao123.com

标题: Flutter资源管理（四） [打印本页]

---

作者: 三尺非寒    时间: 2025-1-20 11:10
标题: Flutter资源管理（四）
1、assets概念

   Flutter APP的安装包中会包含代码和assets（资源），assets会被打包到程序安装包中，包含在应用中会使用到的静态文件，如图片、字体文件、配置文件；这些文件不是由dart代码动态生成的，而是预先准备好的资源，合理利用可以减小应用的大小，提高加载效率。
  2、指定assets

   assets的管理也是在 pubspec.yaml文件中举行管理的，示例如下。

1. flutter:
3.   assets:
4.     - assets/bg1.png
5.     - assets/touxiang.jpg

复制代码

3、assets变体

   在Flutter中，我们有时必要为同一资产提供多个变体，用来应对不同的场景或设备分辨率。比如在不同设备上有不同的背景图。
  

• 如许引入，那这两个文件都会被包含在assets bundle中。在assets目次下的被以为是 _main asset _（主资源），在pc目次下的被以为是一种变体（variant）。
  

4、文本的加载

4.1 通过rootBundle对象

1. import 'dart:async' show Future;
2. import 'package:flutter/services.dart' show rootBundle;
4. Future<String> loadAsset() async {
5.   return await rootBundle.loadString("assets/config.json");
6. }

复制代码

4.2 通过DefaltAssetBundle

• pubspec.yaml
  

1. flutter:
2.   uses-material-design: true
4.   assets:
5.     - assets/text/sample.txt

复制代码

1. import 'dart:convert';
2. import 'package:flutter/material.dart';
3. import 'package:flutter/services.dart';
5. void main() async {
6.   WidgetsFlutterBinding.ensureInitialized();
7.   final String data = await rootBundle.loadString('assets/sample.txt');
8.   runApp(MyApp(sampleText: data));
9. }

复制代码

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

   对代码举行修改，体现在首页的背景图片。

1. class _MyHomePageState extends State<MyHomePage> {
2.   @override
3.   Widget build(BuildContext context) {
4.     return Scaffold(
5.       appBar: AppBar(
6.         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
7.         title: Text(widget.title),
8.       ),
9.       body: const Stack(
10.         children: [
11.           // 添加背景图片
12.           Positioned.fill(
13.             child: DecoratedBox(
14.               decoration: BoxDecoration(
15.                 image: DecorationImage(
16.                   image: AssetImage("assets/imgs/bg1.png"),
17.                   fit: BoxFit.cover,
18.                 ),
19.               ),
20.             ),
21.           ),
22.         ],
23.       ),
24.     );
25.   }
26. }

复制代码

• stack：答应在同一个空间内重叠多个子widget；
  
• Positioned.fill：确保widget填充整个可用空间；
  
• DecoratedBox：修饰其子widget；
  
• DecorationImage：DecoratedBox的一部门用来装饰图像；
  
• AssetImage：从应用资产中加载；
  
• BoxFit.cover：表现图像被拉伸用来填充整个装饰区域。
  

5.2.2 AssetImage

1. class _MyHomePageState extends State<MyHomePage> {
2.   @override
3.   Widget build(BuildContext context) {
4.     return Scaffold(
5.       appBar: AppBar(
6.         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
7.         title: Text(widget.title),
8.       ),
9.       body: const Stack(
10.         children: [
11.             Image.asset(
12.             "assets/imgs/bg1.png",
13.             fit: BoxFit.cover, // 设置图像填充方式
14.             width: MediaQuery.of(context).size.width, // 设置图像的宽
15.             height: MediaQuery.of(context).size.height, // 设置图像的高
16.           ),
17.         ],
18.       ),
19.     );
20.   }
21. }

复制代码

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
  

• IOS
  

   遵照相应的屏幕密度，将其替换为所必要的资源即可。
  6.2 启动页

   加载Flutter框架时，Flutter会使用本地平台机绘制启动页，直到Flutter渲染应用程序，如果不在main()中调用runApp函数，那么启动屏幕将连续体现。
  

• Andriod
  

   可以使用xml绘制启动页，或者直接更换一张图片
  

• IOS
  

   将图片改为这三个名称并根据苹果官方的标准放入图片。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4