Flutter开辟4:资源管理

手机游戏开发者 2024-9-20 02:52:18 112 0 来自 中国
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转为字体文件
  • 使用第三方库加载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 传送门
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2025-4-19 19:29, Processed in 0.164467 second(s), 33 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表