flutter 资源管理

2020-05-12  本文已影响0人  张_何

概述

资源的声明

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/ # 根目录也是可以批量指定的

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

基于像素密度的图片声明
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 中将它显示地声明出来,因为它是资源的标识符。

字体资源的声明

在将 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, // 斜体
));

资源文件的加载

图片资源的加载
其他资源加载

原生平台的资源设置

更换App启动Icon
更换App启动图
<?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>
上一篇下一篇

猜你喜欢

热点阅读