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

这篇具有很好参考价值的文章主要介绍了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, 只需将它们替换为适当大小的图片,保留原始文件名称。

flutter 资源管理,Flutter,flutter,学习flutter 资源管理,Flutter,flutter,学习

 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和原生之间共享资源的方式,实现上需要涉及平台相关的原生代码,可以自行查阅官方文档。文章来源地址https://www.toymoban.com/news/detail-515842.html

到了这里,关于Flutter学习四:Flutter开发基础(五)资源管理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • .NET C#基础(9):资源释放 - 需要介入的资源管理

       IDisposable 接口是一个用于约定可进行释放资源操作的接口,一个类实现该接口则意味着可以使用接口约定的方法 Dispose 来释放资源。其定义如下:   上述描述中可能存在两个问题:   1. 什么是“资源”?   2. C#是一个运行在含有垃圾回收(GC)平台上的语言,为

    2024年02月09日
    浏览(27)
  • Unity基础笔记(7)—— 资源管理

    一、资源导入和导出 资源导入:将打包好的 unitypackage 文件直接拖拽至窗口中,Unity 会自动解析包,再点击 import 即可导入资源。 资源导出:右键点击要导出的资源文件夹,点击 export 导出资源。预制体身上自带的材质会随着预制体一并导出。 二、预制体实例化 游戏中大多数

    2024年02月16日
    浏览(32)
  • Unity基础操作-包与资源管理

     不再像以前一样,会在Unity编辑器内置的浏览器中来打开Unity的网站 并在提示窗口中有给出来解释,是说为了提升编辑器的性能. 并提供了直接到浏览器中访问资源商店的访问链接(Search Online)       因Unity3D编辑器中文包始终未全部完成翻译,具体百度翻译的中英对照情况如下

    2024年02月13日
    浏览(35)
  • Unity框架学习--资源管理器

    1、Inspector窗口拖拽         在脚本中用public声明变量,然后在Inspector窗口把要加载的资源拖拽给该脚本的变量。         不建议在大型项目使用。在公司的项目也不要用。         如果你是独立游戏开发者,则可以用。         不支持热更新。 2、Resources         用Reso

    2024年02月12日
    浏览(35)
  • 鸿蒙学习笔记之资源管理器(十一)

    本次要点: 1.什么是资源管理器 2.资源管理器的应用 资源管理器是系统提供的 资源管理工具 ,我们可以用它查看本台 电脑的所有资源 ,特别是它提供的 树形的文件系统结构 ,使我们能更清楚、更直观地认识电脑的文件和文件夹,这是“我的电脑”所没有的 实现一个随机

    2024年02月13日
    浏览(26)
  • K8s学习(二)Kubernetest的资源管理及五大资源介绍

    本文是k8s学习系列文章,前后串起来是一个完整的课程(学习笔记),本文记录k8s的资源管理方式及五大类资源的具体管理命令,看完本文基本上就能实现k8s的基本操作,可以独立部署小型项目了。 前期文章连接: 从零开始搭建kubernetes集群环境(虚拟机/kubeadm方式) 总结:

    2024年01月16日
    浏览(27)
  • Kubernetes学习笔记-计算资源管理(4)监控pod的资源使用量20230219

    前面学了设置资源的requests和limits,这节课学习如何监控资源,根据监控资源使用情况,对requests和limits进行合理配置。 kubelet包含一个agent,名为cAdvisor,它会收集整个节点上运行的所有单独容器的资源消耗情况,这些信息可以通过一个附加组件Heapster来集中统计整个集群的监

    2024年02月05日
    浏览(34)
  • 鸿蒙ArkUI声明式学习:【UI资源管理】

    OpenHarmony 应用的资源分类和资源的访问以及应用开发使用的像素单位以及各单位之间相互转换的方法。 移动端应用开发常用到的资源比如图片,音视频,字符串等都有固定的存放目录,OpenHarmony 把这些应用的资源文件统一放在  resources  目录下的各子目录中便于开发者使用和

    2024年04月23日
    浏览(22)
  • 【Azure】微软 Azure 基础解析(五)核心体系结构之管理组、订阅、资源和资源组以及层次关系

    本系列博文还在更新中,收录在专栏:「Azure探秘:构建云计算世界」 专栏中。 本系列文章列表如下: 【Azure】微软 Azure 基础解析(三)描述云计算运营中的 CapEx 与 OpEx,如何区分 CapEx 与 OpEx 【Azure】微软 Azure 基础解析(四)Azure核心体系结构组件之数据中心、区域与区域

    2024年02月07日
    浏览(46)
  • 人力资源智能化管理项目(day01:基础架构拆解)

    git clone GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template 项目名 项目模版中的core-js的版本号有些滞后,需要将其版本号改为“3.25.5”(package.json里面18行) 再安装依赖(npm i) 登录界面 首页 ESLint Vetur 提升开发效率 main.js: ①new Vue({})实例化 路由 store(Vuex) 根组件 ②全局注

    2024年01月16日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包