Flutter开发4：资源管理

Flutter应用程序包含两个部分，代码和资源（asset）。资源可在运行时访问。资源通常包括配置文件、图标、图片、字体等。当我们需要使用资源时，需要在根目录下的pubspec.yaml文件中进行配置。

首先在根目录下创建images文件夹，然后将需要的图片拷贝到文件夹中，接着配置pubspec.yaml文件，最后执行flutter pub get命令更新依赖，或者在IDE中使用快捷方式更新。

assets:
    - assets/img/nazha1.png
    - assets/img/nazha2.png

如果资源太多，可以直接配置到父目录，这样只需要配置一行语句就能访问所有图片

 assets:
    - assets/img/

Flutter 中不同分辨率的图片资源是使用了类似于iOS的处理方式，分为1.0x、2.0x、3.0x，除了1.0x可以放在图片目录下，我们还需要在图片文件夹中再建两个文件夹2.0x和3.0x，将对应的切图放入文件夹中，在使用的时候，Flutter框架会自动根据当前分辨率选取图片

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

App的启动图片不能在Flutter体系下配置，需要到原生工程中配置

文本文件加载

rootBundle 每个Flutter应用程序都有一个rootBundle对象， 通过它可以访问资源

import 'package:flutter/services.dart' show rootBundle;

Future loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

DefaultAssetBundle 获取当前BuildContext的AssetBundle

DefaultAssetBundle.of(context).loadString('assets/config.json');

字体资源加载

先将下载的.ttf格式的字体文件，拷贝到对应文件夹

20220505142713.jpg

配置

fonts:
    - family: PTSans
      fonts:
        - asset: assets/fonts/PTSans-Regular.ttf
        - asset: assets/fonts/PTSans-Italic.ttf
          style: italic
        - asset: assets/fonts/PTSans-Bold.ttf
          weight: 700
        - asset: assets/fonts/PTSans-BoldItalic.ttf
          weight: 700
          style: italic

    - family: Piedra
      fonts:
        - asset: assets/fonts/Piedra-Regular.ttf

    - family: ZCOOLKuaiLe
      fonts:
        - asset: assets/fonts/ZCOOLKuaiLe-Regular.ttf

    - family: ZhiMangXing
      fonts:
        - asset: assets/fonts/ZhiMangXing-Regular.ttf

使用

Column(
        children: [
          Image.asset('assets/img/nezha1.jpeg'),
          const Text('春风十里不如你, How are you~', style: TextStyle(fontFamily: 'PTSans',fontSize: 20,fontWeight:FontWeight.w400 ),),
          const Text('春风十里不如你，How are you~', style: TextStyle(fontFamily: 'Piedra',fontSize: 20,fontWeight:FontWeight.w400),),
          const Text('春风十里不如你, How are you~', style: TextStyle(fontFamily: 'ZCOOLKuaiLe',fontSize: 20,fontWeight:FontWeight.w400),),
          const Text('春风十里不如你, How are you~', style: TextStyle(fontFamily: 'ZhiMangXing',fontSize: 20,fontWeight:FontWeight.w400),),
        ],
      ),

SVG 资源加载

SVG 是一种用XML定义的用来描述二维矢量及矢量/栅格图形文件格式。使用SVG 资源，可以减小包的体积大小，更好的适配各种屏幕。

在Flutter中，有两种使用SVG资源的方式

• 将SVG转为字体文件
• 使用第三方库加载SVG图片

将SVG转为字体文件的使用方式，参考 Flutter 中使用svg资源

项目实际开发过程中，为了简便，通常会使用第三方库 flutter_svg 来加载SVG图片，使用方式与我们使用image类似

首先配置资源

 assets:
    - assets/close.svg

使用

Center(
  child: SvgPicture.asset(
    "assets/close.svg",
    color: Colors.grey,
  ),
)

使用iconfont资源

https://www.iconfont.cn/ 为我们提供了海量的矢量图标资源，在Flutter中使用这些资源也还方便，但是在下载大量资源后，仍然需要手动做一些事情，这不符合程序员能偷懒就偷懒的精神，这里有一个简单工具。

flutter_iconfont 传送门