flutter 资源管理

最新推荐文章于 2024-10-12 20:34:01 发布

gf771115

最新推荐文章于 2024-10-12 20:34:01 发布

阅读量631

点赞数

分类专栏： flutter

原文链接：https://www.jianshu.com/p/5a6dc74e9411

版权

flutter 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

概述

flutter中资源管理比较简单，资源(assets)可以是任意类型的文件，比如json、配置文件、字体、图片等。

资源的声明

flutter 中关于资源存放的位置可以是项目中的任意目录下，只需要使用根目录下的pubspec.yaml文件，对这些资源所在的位置进行显示声明就可以了，以帮助flutter识别出这些资源。
指定资源路径名的过程中，我们既可以对每个文件进行挨个指定开业可以采用子目录批量指定的方式。
比如：我们asset目录下的结果如下：

assets
├── background.jpg
├── icons
│   └── food_icon.jpg
├── loading.gif
└── result.json

我们可以在pubspec.yaml文件中指定

flutter:
  assets:
    - assets/background.jpg   # 挨个指定资源路径
    - assets/loading.gif  # 挨个指定资源路径
    - assets/result.json  # 挨个指定资源路径
    - assets/icons/    # 子目录批量指定
    - assets/ # 根目录也是可以批量指定的

上面演示了挨个指定和子目录批量指定的两种方式，通过单个文件声明的，我们需要完整展开资源的相对路径；而对于目录批量指定的方式，只需要在目录名后加路径分隔符就可以了。
需要注意的是：目录批量指定并不递归，只有在该目录下的文件才可以被包括，如果下面还有子目录的话，需要单独声明子目录下的文件。
完成资源的声明后，就可以在代码中访问他们了

基于像素密度的图片声明

flutter 也遵循类基于像素密度的管理方式，如1.0x、2.0x、3.0x或任意倍数。flutter可根据当前设备分辨率加载最接近设备像素比例的图片资源，而为了让flutter更好地识别，我们的资源目录应该将1.0x、2.0x、3.0x的图片资源分开管理。下面我们以background.jpg图片为例，这张图片位于assest目录下。如果想让flutter适配不同分辨率，我们需要将其他分辨率的图片放到对应的分辨率子目录中，如下图所示：

assets
├── background.jpg    //1.0x 图
├── 2.0x // 这里名称是固定的，就这样写
│   └── background.jpg  //2.0x 图 注意不需要在图片结尾处加上@2x，如果加上@2x，表示的就不再是background.jpg了
└── 3.0x
    └── background.jpg  //3.0x 图 注意不需要在图片结尾处加上@3x

而在pubspec.yaml文件声明这个图片资源时，仅声明1.0x图资源既可，

flutter:
  assets:
    - assets/background.jpg   #1.0x 图资源

1.0x 分辨率的图片是资源标识符，而 Flutter 则会根据实际屏幕像素比例加载相应分辨率的图片。这时，如果主资源缺少某个分辨率资源，Flutter 会在剩余的分辨率资源中选择降级加载。

举个例子，如果我们的 App 包包括了 2.0x 和 1.0x的资源，对于屏幕像素比为 3.0 的设备，则会自动降级读取 2.0x 的资源，。不过需要注意的是，即使我们的 App 包没有包含 1.0x 资源，我们仍然需要像上面那样在 pubspec.yaml 中将它显示地声明出来，因为它是资源的标识符。

字体资源的声明

在 Flutter 中，使用自定义字体同样需要在 pubspec.yaml 文件中提前声明。需要注意的是，字体实际上是字符图形的映射。所以，除了正常字体文件外，如果你的应用需要支持粗体和斜体，同样也需要有对应的粗体和斜体字体文件。

在将 RobotoCondensed 字体摆放至 assets 目录下的 fonts 子目录后，下面的代码演示了如何将支持斜体与粗体的 RobotoCondensed 字体加到我们的应用中：

fonts:
  - family: RobotoCondensed  # 字体名字
    fonts:
      - asset: assets/fonts/RobotoCondensed-Regular.ttf # 普通字体
      - asset: assets/fonts/RobotoCondensed-Italic.ttf 
        style: italic  # 斜体
      - asset: assets/fonts/RobotoCondensed-Bold.ttf 
        weight: 700  # 粗体

这些声明其实都对应着 TextStyle 中的样式属性，如字体名 family 对应着 fontFamily 属性、斜体 italic 与正常 normal 对应着 style 属性、字体粗细 weight 对应着 fontWeight 属性等。在使用时，我们只需要在 TextStyle 中指定对应的字体即可：

Text("This is RobotoCondensed", style: TextStyle(
    fontFamily: 'RobotoCondensed',// 普通字体
));
Text("This is RobotoCondensed", style: TextStyle(
    fontFamily: 'RobotoCondensed',
    fontWeight: FontWeight.w700, // 粗体
));
Text("This is RobotoCondensed italic", style: TextStyle(
  fontFamily: 'RobotoCondensed',
  fontStyle: FontStyle.italic, // 斜体
));

资源文件的加载

图片资源的加载

对于图片资源的加载，通常有以下三种方式
1、通过Image.assest构造方法完成图片资源的加载及显示eg: Image.asset('images/logo.png')；
2、加载本地File文件图片，eg:Image.file(new File(’/storage/xxx/xxx/test.jpg’))；
3、加载网络图片，eg: Image.network('http://xxx/xxx/test.gif')

其他资源加载

对于其他资源文件，可以通过flutter应用的竹资源Bundle对象rootBundle来直接访问；
1、对于字符串文件资源，可以使用loadString方法
eg: rootBundle.loadString('assets/result.json').then((msg)=>print(msg));
2、对于二进制文件资源，可以通过load方法

原生平台的资源设置

更换App启动Icon

Android平台上启动图位于根目录android/app/src/main/res/mipmap 下，我们只需要遵守对应的像素密度标准，保留原始图标名称，将图标更换为目标资源即可：

更换Android启动图标.png
iOS平台上，启动图位于根目录 ios/Runner/Assets.xcassets/AppIcon.appiconset 下。同样地，我们只需要遵守对应的像素密度标准，将其替换为目标资源并保留原始图标名称即可：

更换iOS启动图标.png

更换App启动图

对于 Android 平台，启动图位于根目录 android/app/src/main/res/drawable 下，是一个名为 launch_background 的 XML 界面描述文件。

修改 Android 启动图描述文件.png

我们可以在这个界面描述文件中自定义启动界面，也可以换一张启动图片。在下面的例子中，我们更换了一张居中显示的启动图片：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 白色背景 -->
    <item android:drawable="@android:color/white" />
    <item>
         <!-- 内嵌一张居中展示的图片 -->
        <bitmap
            android:gravity="center"
            android:src="@mipmap/bitmap_launcher" />
    </item>
</layer-list>