博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
你必须掌握在Flutter中添加资源文件
阅读量:6956 次
发布时间:2019-06-27

本文共 2096 字,大约阅读时间需要 6 分钟。

在 Flutter 中,需要在根目录下的 pubspec.yaml 文件中配置资源的路径,资源才能被打包使用。

现在,看看如何配置资源吧。

1. 添加图片资源文件

1.1 添加本地图片资源

flutter:    assets:        // 表示引入根目录下的 images 文件夹下的所有资源文件        - images/        // 只添加 images/ 下的 pci.png        - images/pci.png复制代码

⚠️ 注意缩进!

本地文件夹内的资源可以选择导入整个文件夹,或者只导入指定文件。

使用:

Image.asset("images/pic.png")复制代码

1.2 添加依赖插件图片资源

1.添加依赖插件

pubspec.yaml 文件的 dependencies 下添加依赖插件。

dependencies:    flutter_gallery_assets: 0.1.6复制代码

⚠️ 注意缩进!

2.注册依赖插件中的资源

同样需要在 pubspec.yaml 文件的 flutter 下的 assets 下添加所要用到的依赖插件中的图片路径。

flutter:    assets:        - packages/flutter_gallery_assets/places/india_chennai_flower_market.png复制代码

packages 后跟插件的名称,图片需要插件包中的完整路径。

这种情况不能一次性注册一个文件夹的图片了,只能一张图一张图的添加。

3.使用

child: Image.asset(  // 图片路径  'places/india_chennai_flower_market.png',  // 包名  package: 'flutter_gallery_assets',),复制代码

在使用第三方库资源的时候,需要加上包名。

1.3 分辨率相关的资源

Flutter 支持根据设备分辨率自动选择合适分辨率的图片资源,但资源需要按照以下规则添加:

../image.png../1.0x/image.png../2.0x/image.png复制代码

使用:

AssetImage('../image.png')复制代码

只需要使用默认的图即可,AssetImage 会根据设备分辨率自动选择合适大小的图标。

2.添加字体资源

字体资源的添加格式如下,同样是在 pubspec.yaml中:

flutter:    fonts:      // 一组字体的名称      - family: Schyler        fonts:          // 组内包哈的字体资源文件,第一个是默认字体          - asset: fonts/Schyler-Regular.ttf          - asset: fonts/Schyler-Italic.ttf            // 定义该字体的style            style: italic      // 一组字体的名称      - family: Trajan Pro        fonts:          - asset: fonts/TrajanPro.ttf          - asset: fonts/TrajanPro_Bold.ttf            weight: 700      // 一组字体的名称      - family: Raleway        fonts:          - asset: packages/flutter_gallery_assets/fonts/raleway/Raleway-Regular.ttf          - asset: packages/flutter_gallery_assets/fonts/raleway/Raleway-Medium.ttf            weight: 500          - asset: packages/flutter_gallery_assets/fonts/raleway/Raleway-SemiBold.ttf            weight: 600复制代码

使用字体:

TextStyle(    // 字体组名称    fontFamily: 'Raleway',    inherit: false,    fontSize: 24.0,    // 根据 weight 选择具体的字体    fontWeight: FontWeight.w500,    color: Colors.white,    textBaseline: TextBaseline.alphabetic,  )复制代码

如何找到我?

转载于:https://juejin.im/post/5ca82992e51d4535d332e3a0

你可能感兴趣的文章
JAVA桌面图表控件Chart FX for Java Desktop
查看>>
RH413日志服务器篇
查看>>
《编写高质量代码--改善JavaScript程序的188个建议》学习记录(一)
查看>>
Spring学习总结(6)——Spring之核心容器bean
查看>>
一道mysql面试题
查看>>
Storefront与NetScaler的集成配置 - part3
查看>>
图解Undo原理
查看>>
Mysql的几个成功故事
查看>>
在Mac上通过SourceTree管理Github
查看>>
vCenter Server and ESXi Security
查看>>
Django Sendmail Errno[61] Connection Refused
查看>>
web安全
查看>>
XenApp_XenDesktop_7.6实战篇之十五:StoreFront的配置
查看>>
Tablespace Report
查看>>
hibernate映射插件
查看>>
Syngress.Nmap.in.the.Enterprise.Your.Guide.to.Network.Scanning
查看>>
小学生都能看懂的表达式计算(图解)
查看>>
物联网有没有创新的思维模式?如果有,会是什么?
查看>>
微会动微信现场互动:年会策划之用产品思维搞定年会
查看>>
利用STP生成树协议实现负载均衡
查看>>