首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当imageUrl在颤动中动态变化时,CachedNetworkImage不显示占位符

CachedNetworkImage是一个Flutter库中的组件,用于在网络请求图片时进行缓存处理。它可以加载网络图片并在加载过程中显示占位符,当图片加载完成后,会自动将图片缓存到本地,下次再次请求相同的图片时,会直接从缓存中读取,提高了图片加载的效率和用户体验。

然而,当imageUrl在颤动中动态变化时,CachedNetworkImage可能无法显示占位符的问题。这是因为CachedNetworkImage组件在加载图片时,会根据imageUrl来判断是否需要显示占位符。当imageUrl发生变化时,组件会重新加载图片,但由于网络请求的延迟,可能导致占位符无法及时显示。

为了解决这个问题,可以使用Key参数来唯一标识每个CachedNetworkImage组件,当imageUrl发生变化时,更新Key的值。这样可以确保每次imageUrl变化时,都会创建一个新的CachedNetworkImage组件,从而正确显示占位符。

以下是一个示例代码,演示如何使用Key参数解决CachedNetworkImage不显示占位符的问题:

代码语言:dart
复制
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  final String imageUrl;

  MyWidget({Key key, this.imageUrl}) : super(key: key);

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Key _cachedNetworkImageKey;

  @override
  void initState() {
    super.initState();
    _cachedNetworkImageKey = UniqueKey();
  }

  @override
  void didUpdateWidget(MyWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.imageUrl != oldWidget.imageUrl) {
      setState(() {
        _cachedNetworkImageKey = UniqueKey();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
      key: _cachedNetworkImageKey,
      imageUrl: widget.imageUrl,
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => Icon(Icons.error),
    );
  }
}

在上述示例中,我们创建了一个MyWidget组件,其中包含了一个CachedNetworkImage组件。通过传入的imageUrl来更新Key的值,从而解决了imageUrl在颤动中动态变化时,CachedNetworkImage不显示占位符的问题。

推荐的腾讯云相关产品:腾讯云对象存储(COS),它是一种高可用、高可靠、强安全的云端存储服务,适用于存储和处理各类非结构化数据,包括图片、音视频、文档等。您可以通过以下链接了解更多关于腾讯云对象存储的信息:腾讯云对象存储(COS)产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 构建完整应用手册-图片 顶

用占位符淡入图像 使用默认images小部件显示图像时,您可能会注意到它们在加载时会弹出到屏幕上。 这可能会让用户产生视觉震撼。...相反,如果你最初可以显示一个占位符,那么它会不会很好,并且图像在加载时会淡入? 我们可以使用与Flutter一起打包的FadeInImage部件来达到这个目的!...在这个例子中,我们将使用transparent_image包作为一个简单的透明占位符。 您也可以考虑按照Assets和Images指南使用本地资源来占位符。...raw=true', ); 添加占位符 cached_network_image包允许我们使用任何部件作为占位符! 在这个例子中,我们将在图片加载时显示一个蜘蛛。...new CachedNetworkImage( placeholder: new CircularProgressIndicator(), imageUrl: 'https://github.com

1.2K20

Flutter组件学习(二)—— Image

image Image组件的构造方法 在 Android 中,我们都知道,图片的显示方式有很多,资源图片、网络图片、文件图片等等,在 Flutter 中也有多种方式,用来加载不同形式的图片: Image..., 11 width: 120, 12 fit: BoxFit.fitWidth, 13) 第一种方法是加载一个本地的占位图,第二种是加载一个透明的占位图,但是需要注意的是,这个组件是不可以设置加载出错显示的图片的...), 7) CachedNetworkImage 组件中的占位图是一个 Widget,这样的话就可以自定义了,你想使用什么样的组件进行占位都行,同样加载出错的占位图也是一个组件,也可以自己定义;该组件也是通过缓存来加载图片的...这个需要配合Directionality进行使用 gaplessPlayback 当图片发生改变之后,重新加载图片过程中的样式(1、原图片保留) fit 属性中有很多值可以设置: 属性名称 样式 BoxFit.contain...30 ), 31 new Text('网络占位图片CachedNetworkImage:'), 32 new Padding( 33

1.5K30
  • 【Flutter 专题】27 易忽略的【小而巧】的技术点汇总 (四)

    CachedNetworkImage 缓存图片 对于加载网络图片时,添加一个加载动画或网络图片异常时添加一个错误图片会给用户一个良好的体验,此时 CachedNetworkImage 可以帮我们解决这个问题...CachedNetworkImage 是一个三方 pub 库,引入的基本方式省略; CachedNetworkImage 中有两个属性很重要: placeholder 用来在加载图片时的缓冲过程,可以是动态...errorWidget: Container( height: 300.0, child: Image.asset('images/icon_wrong.jpg')), imageUrl...在键盘右下角会有不同的按钮样式。例如搜索页面在输入完成搜索信息后展示搜索的按钮更便捷。此时需要考虑 TextInputAction 属性,可自定义展示内容。...Spacer 占位 Spacer 是和尚偶然间了解到的一个很强大的 Widget,Spacer 和尚的理解是占位组件,直接看效果图更加直观。

    1.4K41

    Flutter的文本、图片和按钮使用

    1 文本控件 文本是视图系统中的常见控件,用来显示一段特定样式的字符串,就比如Android里的TextView、iOS中的UILabel。而在Flutter中,文本展示是通过Text控件实现的。...FadeInImage控件提供图片占位功能,并支持在图片加载完成时淡入淡出视觉效果。由于Image支持gif格式,还可将一些炫酷加载动画作占位图。...图片 缓存只会在运行期间生效,也就是只缓存在内存中。要支持缓存到文件系统,可使用 CachedNetworkImage 控件。...CachedNetworkImage使用类似Image,除了支持图片缓存,还提供比FadeInImage更强大的加载过程占位与加载错误占位,支持比用图片占位更灵活的自定义控件占位。...加载图片时,不仅给用户展示占位的转圈loading,还提供错误图兜底,以备图片加载出错: CachedNetworkImage( imageUrl: "http://xxx/xxx/jpg

    59020

    文本、图片和按钮在Flutter中怎么用

    图片的显示方式有很多,比如资源图片、网络图片、文件图片等,图片格式也各不相同,因此在Flutter中,也有多种方式用来加载不同形式、支持不同格式的图片: 加载本地资源图片,如: Image.asset...FadeInImage控件提供了图片占位的功能,并且支持在图片加载完成时淡入淡出的视觉效果。此外,由于Image支持gif格式,我们甚至还可以将一些炫酷的加载动画作为占位图。...最大缓存限制为100MB,当限定的空间已经存满数据时,把最久没有被访问到的图片清除。图片缓存只会在运行期间生效,也就是只缓存在内存中。...CachedNetworkImage的使用方法与 Image 类似,除了支持图片缓存之外,它还提供了比FadeInImage更为强大的加载过程占位与加载错误占位。...在下面的代码中,我们在加载图片时,不仅给用户展示了作为占位的转圈loading,还提供了一个错误图兜底,以备图片加载出错: CachedNetworkImage( imageUrl:

    7.7K20

    基于 Flutter 定制一套快速开发框架(一)

    Flutter 做 web 开发了,虽然本人不是太推荐,毕竟 web 上还是的 看 React & Vue 系列,这两位大哥目前看来还是更加懂 web 一些,Flutter 因为其自己实现的渲染引擎,因此在多端显示上具备其他跨平台框架不具备的优势...网络请求:考虑使用dio包,因为它提供了更多的功能,如拦截器、全局配置、FormData、请求取消等,基本覆盖了网络请求常见的功能,在拦截器中我们可以实现很多统一处理的业务逻辑,嗯,很棒。...它还支持占位符和错误的处理。另外我们也可以考虑一下,如果需要,实现图片预加载和内存管理策略。布局响应式:利用MediaQuery来获取设备信息,并根据不同屏幕尺寸调整布局。...主题切换模块我决定使用使用provider库来管理主题状态,并允许用户在亮色和暗色主题之间切换,以下是我们 App 入口的架子。...CachedNetworkImage( imageUrl: imageUrl, placeholder: (context, url) => CircularProgressIndicator

    60520

    Flutter lesson 6: Flutter组件之基础组件(二)

    Row Row这个Widget其实就是一个布局组件,类似于前端中flex-direction: row;。作用就是可以使Row中的子元素在水平方向上面排列,可以用来做走马灯轮播等效果。...= false, // 当图片发生改变之后,重新加载图片过程中的样式(1、原图片保留) this.filterQuality = FilterQuality.low, // 图片 filter 质量...如果我们要使用图片,我们需要两个步骤: 在根目录下面新建images文件夹用来存放图片,也可以是其他地方,但是更推荐在根目录中 配置pubspec.yaml 为了更好的适配图片,还是建议使用多套图片,比如...但是我们无法设置网络图片加载出错显示的图片,这里可是使用第三方的工具cached_network_image new CachedNetworkImage( width: 120, fit:...这个属性就像是CSS中设置背景重复一样 ? 包含以上几种属性,一般很少设置重复属性的。 noRepeat: 不设置重复。

    2.2K20

    Go 语言开发设计指北

    = nil { ... } defer row.Close() ... }() } 【推荐】对于可预见容量的slice或者map,在make初始化时...建议单个服务打点的key不超过10000个,key中单个维度不同值不超过 1000个(千万不要用 user_id 来打点); 【推荐】如果展示的时候需要拿成百上千个key的数据通过 Graphite 的聚合函数做聚合...日志信息需带上下文,其中logid必须带上,同一个请求打的日志都需带上logid,这样可以根据logid查找该次请求相关的信息; 【强制】对debug/notice/info 级别的日志输出,必须使用条件输出或者使用占位符方式...数据库相关 【强制】操作数据库 sql 必须使用 stmt 格式,使用占位符替代参数,禁止拼接 sql; 【强制】SQL语句查询时,不得使用 SELECT * (即形如 SELECT * FROM tbl...WHERE),必须明确的给出要查询的列名,避免表新增字段后报错; 【强制】对于线上业务 SQL,需保证命中索引,索引设计基于业务需求及字段区分度,一般可区分状态不高的字段(如 status 等只有几个状态),不建议加到索引中

    51830

    demo2动态加载显示商品详情页

    考虑:实现功能之后,是否要做占位图 进行图片的占位??! */ 难点:动态的加载。 实现:首先创建ui 然后请求数据 最后在主线程进行赋值 并且刷新ui 即可实现。...假如请求到了头像 昵称 商品图 商品描述 [UIView animateWithDuration:1.0f animations:^{ //在这里刷新主界面,展示新界面,在主线程中刷新...; // goodIntro.text = @"这个宝贝,人见人爱"; //设置内容的位置及格式 //1.名字最多显示8个字。多余的显示......20) :JTextFCMake([UIFont systemFontOfSize:15], [UIColor blackColor])]; nicknameLabel.text = @"名字占位符...getLabel:CGRectMake(CGRectGetMinX(iconIMG.frame), CGRectGetMaxY(goodIMG.frame)+10, SCREENW-30, 30) :@"商品简介占位符

    71790

    了解C#的协变和逆变

    : 兼容性:.NET2.0就推出了泛型,而从.NET 2.0到.NET 3.5期间不支持对泛型接口中的占位符T支持隐式转换,因此在.NET4.0推出协变和逆变 为了支持更广泛的隐式类型的转换,在这里就是在泛型体系中支持...在C#中,目前只有泛型接口和泛型委托可以支持协变和逆变, 协变(Covariance) 内置的泛型协变接口,IEnumerator、IQuerable、IGrouping<Tkey, TElement...有下面的约束,否则则会在编译时报错: 泛型参数占位符以out关键子标识,并且占位符T只能用于只读属性、方法或者委托的返回值,out简而易懂,就是输出的意思 当要进行类型转换,占位符T要转换的目标类型也必须是其基类...、方法或者委托的输入参数 当要进行类型转换,占位符T要转换的目标类型也必须是其子类,上述例子则是FooBase转为Foo 总结 协变和逆变只对泛型委托和泛型接口有效,对普通的泛型类和泛型方法无效 协变和逆变的类型必须是引用类型...,因为值类型不具备继承性,因此类型转换存在不兼容性 泛型接口和泛型委托可同时存在协变和逆变的类型参数,即占位符T 参考 泛型中的协变和逆变 | Microsoft Docs 《你必须知道的.NET(第2

    94810

    TypeError报错处理

    一、Python中的TypeError简介这个错误通常表示在方法调用时,参数类型不正确,或者在对字符串进行格式化操作时,提供的变量与预期不符。...二、错误的源头:字符串格式化的奥秘字符串格式化是Python中一个非常实用的功能,它允许根据一定的格式将变量插入到字符串中。然而,当提供的变量与字符串中的占位符不匹配时,就会触发TypeError。...,提供的参数类型必须与占位符相匹配。...5.1 案例一:方法调用中的类型不匹配问题描述在调用一个接受整数参数的函数时,不小心传入了一个字符串。解决方案确保传递给函数的参数类型是正确的,或者在函数内部进行类型检查和转换。...5.2 案例二:字符串格式化的类型错误问题描述在进行字符串格式化时,提供的变量类型与占位符不匹配。解决方案检查并确保所有变量的类型与占位符一致,或使用类型转换函数进行调整。

    18810

    实现图片懒加载的三种方式(前端路由懒加载原理)

    实现图片懒加载的原理 图片懒加载的实现原理:将图片的地址放在data-set属性中,由于图片并没有在src中,并不会发送http请求。...(VueLazyload, { preLoad: 1.3, // 提前加载高度(数字 1 表示 1 屏的高度) 默认值:1.3 error: 'dist/error.png', // 当加载图片失败的时候...loading: 'dist/loading.gif', // 图片加载状态下显示的图片 attempt: 3 // 加载错误后最大尝试次数 默认值:3 }) (3)在组件中使用:...” //showMessage.imageUrl为变量名,图片的地址 4.jquery 实现图片懒加载 jquery实现主要是依赖了lazyload.js (1)引入插件 占位符 }); 5.原生js实现图片懒加载 获取到所有需要用到的高度,和加载的图片,修该data-set 属性实现懒加载 html部分 <img data-set ="img/one.jpg" src

    1.8K10

    UITableViewCell自适应网络不规则图片和文字组合的高度

    列表样式 有时我们会需要对cell的图片和文字进行显示并完美自适配其大小,下面用我有限的知识做了个适配,看着好像还能用,哈哈 直接上code 001 在tableview的获取cell高度的方法里写调用自定义...*model; - (void)setModel:(DataModel *)model; // 获取cell的高度的方法 - (CGFloat)cellForHeight; @end 003 在....{ // 先从缓存中查找图片 UIImage *image = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey: imageURL]...; // 没有找到已下载的图片就使用默认的占位图,当然高度也是默认的高度了,除了高度不固定的文字部分。...defaultCenter] postNotificationName:@"reload" object:nil]; }); }]; } 004 在列表页收到刷新通知

    2.1K20

    什么是 Vue3 指令?

    在 Vue3 中,指令(Directives)是一种特殊的属性,用于给模板中的 HTML 元素添加特定的行为和功能。通过使用指令,我们可以直接操作 DOM 元素、响应事件、监听数据变化等。...例如:imageUrl">上述代码将把 imageUrl 数据的值绑定到 src 属性上,实现动态加载图片。...v-if 和 v-showv-if 和 v-show 指令用于根据条件来决定元素是否渲染和显示。它们的区别在于:v-if:根据条件动态地添加或删除元素。...如果条件为真,则元素会被渲染到 DOM 中,否则从 DOM 中移除。v-show:根据条件控制元素的显示和隐藏,不会改变 DOM 结构。...因此,当需要频繁切换显示和隐藏时,使用 v-show 更合适;而当条件较少变化时,使用 v-if 较为适合。v-forv-for 指令用于循环遍历数组或对象,并生成重复的 HTML 元素。

    23410

    TypeError报错处理

    一、Python中的TypeError简介这个错误通常表示在方法调用时,参数类型不正确,或者在对字符串进行格式化操作时,提供的变量与预期不符。...二、错误的源头:字符串格式化的奥秘字符串格式化是Python中一个非常实用的功能,它允许根据一定的格式将变量插入到字符串中。然而,当提供的变量与字符串中的占位符不匹配时,就会触发TypeError。...,提供的参数类型必须与占位符相匹配。...5.1 案例一:方法调用中的类型不匹配问题描述在调用一个接受整数参数的函数时,不小心传入了一个字符串。解决方案确保传递给函数的参数类型是正确的,或者在函数内部进行类型检查和转换。...5.2 案例二:字符串格式化的类型错误问题描述在进行字符串格式化时,提供的变量类型与占位符不匹配。解决方案检查并确保所有变量的类型与占位符一致,或使用类型转换函数进行调整。

    17010

    Magicodes.IE 2.2发布

    可以使用此方式. 2020.03.19 [Nuget]版本更新到2.2.0-Beta 2 [EXCEL导入]修复日期格式的导入Bug,支持datetime和DateTimeOffset以及可为空类型,默认支持本地化时间格式...如需在Docker中使用,请参阅文档中的“Docker中使用”一节. 相关功能均已编写单元测试,在使用的过程中可以参考单元测试....教程 基础教程之导入学生数据 (点此访问) 基础教程之导出Excel (点此访问) 基础教程之导出PDF收据(点此访问) 在码头中使用 (动态导出(待补充) (多Sheet导入(待补充) csv导入导出...特点 需配合相关导入导出的DTO模型使用,支持通过DTO以及相关特性控制导入导出.配置特性即可控制相关逻辑和显示结果,无需修改逻辑代码; 支持各种筛选器,以便支持多语言、动态控制列展示等场景,具体使用见单元测试...: (导入列头筛选器(可动态指定导入列、导入的值映射关系) 导出列头筛选器(可动态控制导出列,支持动态导出(数据表) (导入结果筛选器(可修改标注文件) 导出支持文本自定义过滤或处理; 导入支持中间空行自动跳过

    1.3K10

    MyBatis框架基础知识(03)

    id, @Param("email") String email ); 后续,在配置SQL映射时,在#{}占位符中,需要使用的就是@Param注解中配置的注解参数!...item:遍历过程中,得到的集合或数组中的元素的名称,当确定该属性的名称后,在节点的子级,就可以通过#{}占位符中填写这个名称来表示集合或数组中的某个值。...关于#{}和${}格式的占位符 在MyBatis中,配置SQL映射时,可以使用#{}或${}格式的占位符表示某个变量。...严格来说,当使用#{}格式的占位符时,MyBatis会先使用问号?...解决查询时名称不匹配导致无法封装数据的问题【2】 当名称不匹配时,还可以在XML文件中配置节点,以指导MyBatis如何完成正确的封装!例如: <!

    77930
    领券