Flutter Image

短命女 2021-10-13 04:19 283阅读 0赞

阅读：[图片加载原理与缓存][Link 1]

1.  Image是一组合容器，将“图片”的来源（ImageProvider）与绘制（RawImage）组合起来展示图片。
2.  ImageProvider是一个基类，暴露一个通用解析接口resolve给外部使用，返回ImageStream，可以用来监听解析结果ImageInfo。同时ImageProvider实现了通用的缓存逻辑，典型的面向对象编程思想，提取通用部分做成基类，方便复用。
3.  ImageProvider有两个虚函数，需要子类实现，分别是load，用于不同图片源的加载，如网络或本地assets；obtainKey，用于缓存key，区分是否同一缓存对象，如网络图片的url或本地图片的文件路径。
4.  AssetsImage源码里有一个Flutter团队对于性能优化的有意思的一个实现，对于速度快的异步调用转换为同步返回，以尽量在同一帧绘制中展示图片，如注释：

@override
      Future<AssetBundleImageKey> obtainKey(ImageConfiguration configuration) {
        // This function tries to return a SynchronousFuture if possible. We do this
        // because otherwise showing an image would always take at least one frame,
        // which would be sad. (This code is called from inside build/layout/paint,
        // which all happens in one call frame; using native Futures would guarantee
        // that we resolve each future in a new call frame, and thus not in this
        // build/layout/paint sequence.)

[Link 1]: https://book.flutterchina.club/chapter14/image_and_cache.html

发表评论取消回复

表情：

评论列表（有 0 条评论，283人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter Image组件如何处理图片加载过程中的错误？

在Flutter中，Image组件可以通过监听加载过程中的错误来处理图片加载过程中的错误。 [新一代ChatGpt智能助手文客微创][ChatGpt_] 具体来说，可以使

古城微笑少年丶/ 2024年03月27日 19:09/ 0 赞/ 78 阅读

相关 # IMAGE - Image Perimeters

\ IMAGE - Image Perimeters \\ 题面翻译 \\\ 描述给出一张由"x"和"."组成的矩阵。每个"x"可以向上下左右及两个斜对角进行连通，请

深藏阁楼爱情的钟/ 2024年03月23日 14:23/ 0 赞/ 68 阅读

相关 image

如何修改才能让图片宽度为 300px ？注意下面代码不可修改。 <img src="1.jpg" style="width:480px!important;”> 方

约定不等于承诺〃/ 2023年10月12日 08:09/ 0 赞/ 69 阅读

相关 flutter 封装 image加载失败时默认显示

class ImageBuildView extends StatelessWidget { final String url;

刺骨的言语ヽ痛彻心扉/ 2023年10月04日 10:32/ 0 赞/ 34 阅读

相关 Flutter 组件之Image、本地图片、远程图片、图片裁剪

Image本地图片配置 > 1. `pubspec.yaml`中把`所有图片资源`添加到配置文件中,并且区分至少 `2.0x、3.0x`两种屏幕分辨率素材。 > 2.

旧城等待，/ 2023年07月15日 11:30/ 0 赞/ 18 阅读

相关 Flutter 图片 Image 图标 Icon 参数图文理解

文章目录 Image 加载项目的资源图片加载系统的图片加载网

我就是我/ 2023年07月14日 08:21/ 0 赞/ 26 阅读

相关 Flutter Image 图片显示样式 BoxFit

常见用法如下: Image.asset("assets/images/ic_qrcode_preview_tiny.png", hei

灰太狼/ 2023年07月01日 08:43/ 0 赞/ 3 阅读

相关 images

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvcml6

梦里梦外;/ 2023年06月25日 12:27/ 0 赞/ 140 阅读

相关 Flutter Image

阅读：[图片加载原理与缓存][Link 1] 1. Image是一组合容器，将“图片”的来源（ImageProvider）与绘制（RawImage）组合起来展示图片。 2.

短命女/ 2021年10月13日 04:19/ 0 赞/ 284 阅读

相关 flutter图片（ image）缩放效果

这里的缩放模式跟Android里面的图片的缩放模式还是相差不大的，可能更多的是类别少了一些吧，下面是image缩放模式的详细介绍，在谷歌官方所获取到的。

怼烎@/ 2021年06月30日 13:01/ 0 赞/ 865 阅读