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<String> loadAsset() async {
return await rootBundle.loadString('assets/config.json');
}
DefaultAssetBundle 获取当前BuildContext的AssetBundle
DefaultAssetBundle.of(context).loadString('assets/config.json');
字体资源加载
先将下载的.ttf格式的字体文件,拷贝到对应文件夹
配置
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中使用这些资源也还方便,但是在下载大量资源后,仍然需要手动做一些事情,这不符合程序员能偷懒就偷懒的精神,这里有一个简单工具。