Flutter学习四:Flutter开发基础(五)资源管理

目录

0 引言

1 资源管理

1.1 指定 assets

1.2 Asset 变体(variant)

1.3 加载 assets

1.3.1  加载文本

1.3.2 加载图片

1.3.2.1 声明分辨率相关的图片

1.3.2.2 加载图片

1.3.3 依赖包中的资源图片

 1.3.4 打包包中的 assets

1.3.5  特定平台 assets 

1.3.5.1 设置APP图标

 1.3.5.2 更新启动页

1.4 平台共享 assets


0 引言

本文是对第二版序 | 《Flutter实战·第二版》 (flutterchina.club)的学习和总结。

1 资源管理

Flutter APP 安装包中会包含代码和 assets(资源)两部分。

Assets 是会打包到程序安装包中的,可在运行时访问。

常见类型的 assets 包括静态数据(例如JSON文件)、配置文件、图标和图片等。

1.1 指定 assets

和包管理一样,Flutter 也使用pubspec.yaml 文件来管理应用程序所需的资源。

  • assets指定应用程序的资源文件
  • asset 的路径是相对于pubspec.yaml文件路径的
  • asset 的声明顺序是无关紧要的
  • asset的实际目录可以是任意文件夹
  • 在构建期间,Flutter 将 asset 放置到称为 asset bundle 的特殊存档中,应用程序可以在运行时读取它们(但不能修改)。
flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

1.2 Asset 变体(variant)

pubspec.yaml的assets 部分中指定 asset 路径时,

flutter:
  assets:
    - graphics/background.png

如果应用程序目录中有以下文件:

  • …/pubspec.yaml
  • …/graphics/my_icon.png
  • …/graphics/background.png
  • …/graphics/dark/background.png
  • ….

那么,在构建过程中,会在相邻子目录中查找具有相同名称的任何文件。

这些文件随后会与指定的 asset 一起被包含在 asset bundle 中,graphics/background.pnggraphics/dark/background.png 这两个文件都将包含在您的 asset bundle中。前者被认为是_main asset_ (主资源),后者被认为是一种变体(variant)。

在选择匹配当前设备分辨率的图片时,Flutter会使用到 asset 变体。

1.3 加载 assets

可以通过AssetBundle 对象访问其 asset 。

1.3.1  加载文本

  • 通过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;

/*
  1.使用rootBundle直接加载 asset(例如JSON文件)
*/
Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}


/*
  2.使用DefaultAssetBundle.of()在应用运行时来间接加载 asset(例如JSON文件)
*/

1.3.2 加载图片

类似于原生开发,Flutter也可以为当前设备加载适合其分辨率的图像。

1.3.2.1 声明分辨率相关的图片

AssetImage可以将asset的请求逻辑映射到最接近当前设备像素比例(dpi)的asset,即使用默认的 asset bundle 加载资源时,内部会自动处理分辨率等,这些处理对开发者来说是无感知的。 (如果使用一些更低级别的类,如 ImageStream或 ImageCache时你会注意到有与缩放相关的参数)。

  • 主资源默认对应1.0倍分辨率的图片
  • 在设备像素比率为1.8的设备上,2.0倍分辨率的图片将被选择

  • 在设备像素比率为2.7的设备上,3.0倍分辨率的图片将被选择

如果未在Image widget上指定渲染图像的宽度和高度,那么Image widget将占用与主资源相同的屏幕空间大小。 也就是说,如果.../background.png是72px乘72px,那么.../3.0x/my_icon.png应该是216px乘216px; 但如果未指定宽度和高度,它们都将渲染为72像素×72像素(以逻辑像素为单位)。

flutter:
  assets:
    - graphics/background.png
    - graphics/2.0x/background.png
    - graphics/3.0x/background.png
1.3.2.2 加载图片

要加载图片,可以使用 AssetImage类。例如,我们可以从上面的asset声明中加载背景图片:

注意,AssetImage 并非是一个widget, 它实际上是一个ImageProvider。

Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('graphics/background.png'),
      ),
    ),
  );
}

如果想要直接得到一个显示图片的widget,可以使用Image.asset()方法,如:

Widget build(BuildContext context) {
  return Image.asset('graphics/background.png');
}

1.3.3 依赖包中的资源图片

要加载依赖包中的图像,必须给AssetImage提供package参数。

例如,假设您的应用程序依赖于一个名为“my_icons”的包,它具有如下目录结构:

  • …/pubspec.yaml
  • …/icons/heart.png
  • …/icons/1.5x/heart.png
  • …/icons/2.0x/heart.png

 注意:包在使用本身的资源时也应该加上package参数来获取。

/*
  加载依赖包中的图像
*/

//方法一:
AssetImage('icons/heart.png', package: 'my_icons')

//方法二:
Image.asset('icons/heart.png', package: 'my_icons')

 1.3.4 打包包中的 assets

  • 如果在pubspec.yaml文件中声明了期望的资源,它将会打包到相应的package中。
  • 包本身使用的资源必须在pubspec.yaml中声明。

例如,一个名为“fancy_backgrounds”的包,可能包含以下文件:

  • …/lib/backgrounds/background1.png
  • …/lib/backgrounds/background2.png
  • …/lib/backgrounds/background3.png

注意:lib/是隐含的,在pubspec.yaml中声明时不需要包含在内。 

要想将第一张图像打包到包中,必须在pubspec.yaml的assets部分中声明它: 

flutter:
  assets:
    - packages/fancy_backgrounds/backgrounds/background1.png

1.3.5  特定平台 assets 

上面的资源都是flutter应用中的,这些资源只有在Flutter框架运行之后才能使用。

如果要给我们的应用设置APP图标或者添加启动图,那我们必须使用特定平台的assets。

1.3.5.1 设置APP图标

更新Flutter应用程序启动图标的方式与在本机Android或iOS应用程序中更新启动图标的方式相同。

  • Android

    在 Flutter 项目的根目录中,导航到.../android/app/src/main/res目录,里面包含了各种资源文件夹(如mipmap-hdpi已包含占位符图像 “ic_launcher.png”)。 只需按照Android开发人员指南中的说明, 将其替换为所需的资源,并遵守每种屏幕密度(dpi)的建议图标大小标准。

  • iOS

    在Flutter项目的根目录中,导航到.../ios/Runner/Assets.xcassets/AppIcon.appiconset。该目录中已经包含占位符图片icon-App-xxxxxxxx.png, 只需将它们替换为适当大小的图片,保留原始文件名称。

 1.3.5.2 更新启动页

在 Flutter 框架加载时,Flutter 会使用本地平台机制绘制启动页。

此启动页将持续到Flutter渲染应用程序的第一帧时。

注意: 这意味着如果您不在应用程序的main()方法中调用runApp函数 (或者更具体地说,如果您不调用window.render去响应window.onDrawFrame)的话, 启动屏幕将永远持续显示。

  • Android

要将启动屏幕(splash screen)添加到您的Flutter应用程序, 请导航至.../android/app/src/main。在res/drawable/launch_background.xml,通过自定义drawable来实现自定义启动界面(你也可以直接换一张图片)。

  • iOS

要将图片添加到启动屏幕(splash screen)的中心,请导航至.../ios/Runner。在Assets.xcassets/LaunchImage.imageset, 拖入图片,并命名为LaunchImage.pngLaunchImage@2x.pngLaunchImage@3x.png。 如果你使用不同的文件名,那您还必须更新同一目录中的Contents.json文件,图片的具体尺寸可以查看苹果官方的标准。

1.4 平台共享 assets

如果我们采用的是Flutter+原生的开发模式,那么可能会存Flutter和原生需要共享资源的情况。

比如Flutter项目中已经有了一张图片A,如果原生代码中也要使用A,我们可以将A拷贝一份到原生项目的特定目录。

这样的话虽然功能可以实现,但是最终的应用程序包会变大,因为包含了重复的资源。

为了解决这个问题,Flutter 提供了一种Flutter和原生之间共享资源的方式,实现上需要涉及平台相关的原生代码,可以自行查阅官方文档

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 官方文档:Flutter 官方文档提供了完整的学习资源,包括入门指南、教程、API 参考、示例代码等等。官网:https://flutter.dev/docs 2. Flutter 中文网:Flutter 中文网是针对中国开发者的 Flutter 学习资源,提供了中文文档、教程、视频课程、社区论坛等。官网:https://flutterchina.club/ 3. Flutter 实战教程:Flutter 实战教程是一本由 Flutter 官方团队和社区作者合作编写的实战教程,全面讲解了 Flutter 的各个方面。官网:https://book.flutterchina.club/ 4. Flutter 官方 YouTube 频道:Flutter 官方 YouTube 频道提供了大量的教程视频,包括 Flutter 入门、布局、动画、网络请求等等。官网:https://www.youtube.com/c/FlutterDev 5. Flutter Gallery:Flutter Gallery 是一个官方提供的 Flutter 示例应用,展示了 Flutter 的各种特性和功能,可以帮助开发者更好地了解 Flutter。官网:https://gallery.flutter.dev/ 6. Flutter App Samples:Flutter App Samples 是一个由社区维护的 Flutter 应用示例库,包括各种类型的应用,如计算器、天气应用、电影评分应用等等。官网:https://flutter.dev/docs/cookbook#samples 7. Flutter 中文社区:Flutter 中文社区是一个由开发者自发组建的社区,提供了丰富的学习资源,包括博客、论坛、教程、实战项目等等。官网:https://flutter.cn/ 8. Flutter UI 网站:Flutter UI 网站提供了大量的 Flutter UI 设计资源,包括组件、模板、样式等等,可以帮助开发者快速构建 UI。官网:https://flutterui.net/ 9. Flutter Weekly:Flutter Weekly 是一个由社区维护的每周更新的 Flutter 新闻和教程汇总,可以让开发者快速了解最新的 Flutter 动态。官网:https://flutterweekly.net/ 10. Flutter 开源项目:Flutter 开源项目是一个由社区维护的 Flutter 应用开源项目库,包括各种类型的应用,如电商应用、新闻应用、社交应用等等,可以帮助开发学习和实践 Flutter。官网:https://github.com/Solido/awesome-flutter

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值