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 imageimages/2.0x/my_icon.png // 2.0x imageimages/3.0x/my_icon.png // 3.0x imageApp的启动图片不能在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转为字体文件的使用方式,参考 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 传送门 |