Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?

陈航 2019-08-06
你好,我是陈航。
在上一篇文章中,我与你介绍了 Flutter 的主题设置,也就是将视觉资源与视觉配置进行集中管理的机制。
Flutter 提供了遵循 Material Design 规范的 ThemeData,可以对样式进行定制化:既可以初始化 App 时实现全局整体视觉风格统一,也可以在使用单子 Widget 容器 Theme 实现局部主题的覆盖,还可以在自定义组件时取出主题对应的属性值,实现视觉风格的复用。
一个应用程序主要由两部分内容组成:代码和资源。代码关注逻辑功能,而如图片、字符串、字体、配置文件等资源则关注视觉功能。如果说上一次文章更多的是从逻辑层面分享应该如何管理资源的配置,那今天的分享则会从物理存储入手与你介绍 Flutter 整体的资源管理机制。
资源外部化,即把代码与资源分离,是现代 UI 框架的主流设计理念。因为这样不仅有利于单独维护资源,还可以对特定设备提供更准确的兼容性支持,使得我们的应用程序可以自动根据实际运行环境来组织视觉功能,适应不同的屏幕大小和密度等。
随着各类配置各异的终端设备越来越多,资源管理也越来越重要。那么今天,我们就先看看 Flutter 中的图片、配置和字体的管理机制吧。

资源管理

在移动开发中,常见的资源类型包括 JSON 文件、配置文件、图标、图片以及字体文件等。它们都会被打包到 App 安装包中,而 App 中的代码可以在运行时访问这些资源。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(21)

  • 3327
    1. 使用2.0x图片,优先使用和当前像素密度相近的资源
    2.找2.0x图片,按分辨率由低到高找

    作者回复: 对

    2019-08-06
    6
  • Geek_45a2f1
    老师,我发现直接在drawable里面设置启动图,限制太大,于是就声明了一个widget,但是在APP启动的时候还是有白屏,请问有什么方法解决呢

    作者回复: Flutter需要借助于原生Android/iOS的运行环境,所以在引擎初始化之前的那部分工作(比如启动图、App图标、App名字),Flutter是搞不定的,必须要回到原生的工程中去实现

    2019-08-14
    2
  • 亡命之徒
    对于像素密度3.0x的会找到2.0x的图片,对于2.0x的像素密度,1.0会自动压缩处理

    作者回复: 赞

    2019-08-06
    2
  • 拼命的小贝壳
    老师,启动icon为什么不在flutter本工程内增加一个配置,运行前编译到原生工程内?

    作者回复: 这个思路是可行的,我猜Flutter不这么做可能是想从设计层面保持Flutter工程和iOS/Android工程的独立性和简单性。毕竟Flutter只是一个应用层的框架,除了启动图、应用图标之外,像应用的配置、多语言环境、签名证书、设备配置这些东西是必须通过原生工程搞定的。通过脚本同步固然可行,但从框架层面考虑,Flutter不太可能只考虑一两个应用配置的迁移同步,必须要给出一个在Flutter内闭环的完整应用配置同步方案,后续随着原生开发环境的升级,维护和适配的工作量不会低的。

    2019-11-28
  • Captain
    目录批量指定并不递归,只有在该目录下的文件才可以被包括,如果下面还有子目录的话,需要单独声明子目录下的文件。 这句话 能举例说明么?

    作者回复: 就是挨个单独声明子目录,或者单独声明子目录下的文件啊

    2019-11-19
  • 以为 Android 和 iOS 的都是生成的,可以加到 gitignore 中,看来不行啊。那哪些可以忽略呢?

    作者回复: 普通flutter工程的ios和android目录不能忽略,module工程可以

    2019-10-22
  • 🌝
    目录批量指定的话,需不需要把2.0x、3.0x的目录再指定一遍?

    作者回复: 你可以试试看

    2019-10-19
    1
  • jerry
    3.0像素密度的机器,使用1.0密度的图片,会放大吗

    作者回复: 看你这个坑位有多大了,如果不设坑位大小,会按照实际比例去填

    2019-10-17
  • zjhuang
    pubspec.yaml 可以直接将图片资源文件指定到 Android 的 mipmap-xhdpi 中吗?此时该目录下的资源 Flutter 会当成是 1.0x 的还是 2.0x 的

    作者回复: 不可以

    2019-10-16
  • 承香墨影
    老师,您好。有 2 个疑问,希望您能解答。
    1. Flutter 中加载图片,会对图片的尺寸做优化吗?例如同一张 50x50 的图片,显示在两个不同尺寸的 Image 上,例如 20x20 和 40x40 的 Image,它们在内存中是一份还是两份数据? 然后在内存中占用的内存尺寸,是如何计算的?是按照原图的尺寸和它所存放的位置来计算的,还是依赖加载 Widget 的尺寸?
    2. 如果是网络图片,又是如何处理的?会和 Android 的 Glide 之类的图片库一样,对其进行采样率的压缩吗?

    作者回复: 1.原始图片数据是一份(bitmap大小),渲染数据是两份(按加载widget尺寸算压缩后的bitmap大小)。
    2.同1

    你可以自己试验一下,用Dart DevTools中的Memory工具

    2019-10-01
  • 和小胖
    老师好,请问下关于字体那块,本质上还是配了 3 种字体是吧?如果只用一种字体是不是也可以进行加粗倾斜的设置呢?

    作者回复: 1.对
    2.TextStyle中有fontWeight和fontStyle属性,可以为普通字体设置粗体和斜体,不过有些字体不支持

    2019-09-04
  • Geek_neterM
    对于android的启动图,设置之后,就在当前目录放置图片嘛? 那么格式是什么?另外,启动图,是不是也要像 启动图标那样,设置 mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi?

    作者回复: 1.在mipmap目录或者drawable都行;
    2.对

    2019-08-30
    1
  • Norman
    老师您好,我在加载网络图片的时候,网络图片一直加载不出来,并且报这样的错误信息OS Error: nodename nor servname provided, or not known,
    errno = 8
    请问这是为什么呀?

    作者回复: 检查一下网络权限

    2019-08-29
  • Geek_614299
    1.0x、2.0x、3.0x分别对应多大的分辨率?有标准吗?

    作者回复: 不是对应分辨率,是对于像素密度。具体可以参考这个网站:https://material.io/resources/devices/

    2019-08-27
  • Yolo七夜
    get到批量声明的技能,嘿嘿
    2019-08-13
  • Norman
    所以,思考题的答案是什么呢老师?文章中有一句话,如果主资源缺少某个分辨率资源,那么会在剩余资源中寻找最低的分辨率资源去加载,按照这个说法,第一个问题的答案是1.0x。但是我又总感觉这不符合常理,按道理如果找不到3.0x,难道不应该是加载2.0x吗?

    作者回复: 早期的Flutter版本会在缺少分辨率资源时,一刀切直接使用最低的分辨率资源,最近几个版本已经调整为使用最合适的分辨率资源了,我也把这部分内容更新了。所以你的猜测是对的,找不到3.0x会继续使用2.0x的资源

    2019-08-12
  • Geek_98a104
    老师,批量声明报错 是什么原因啊?

    作者回复: 看下是不是空格缩进有问题

    2019-08-08
    1
  • Mr.J
    1、1.0x,因为3.0x的资源不存在,所以在存在的资源中查找分别率最低的资源,即1.0x;
    2、2.0x,因为1.0x的资源不存在,找剩下的分辨率最低的,只有2.0x,所以选择2.0x;

    作者回复: 早期的Flutter版本会在缺少分辨率资源时,一刀切直接使用最低的分辨率资源,最近几个版本已经调整为使用最合适的分辨率资源了,我也把这部分内容更新了。所以答案都是会找2.0x的资源

    2019-08-08
  • 獸丶
    Flutter这种资源声明跟引用感觉比Android要麻烦复杂很多

    作者回复: 批量声明就好了

    2019-08-06
  • 许童童
    老师你好,做项目的时候图片目录结构应该怎么设计?是根据组件新建文件夹,还是统一放在一个目录下?

    作者回复: 一般来统一放一个就行了。如果你的项目比较大,可以拆成多个依赖库,把相关图片放到专门的库里

    2019-08-06
收起评论
21
返回
顶部