首页
学习
活动
专区
工具
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.4K30
  • 【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

    56620

    文本、图片和按钮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

    54920

    flutter 轮播图动态加载网络图片的方法

    全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。...Swiper,网上很多例子只是加载固定的几张图,并且页面只有一个轮播图,实际应用,可能会遇到类似ins这种,加载列表,并且都是多图模式的情况。...需要添加依赖包 flukit: ^1.0.0 引用 import 'package:flukit/flukit.dart'; //这一坨放在自己想要显示轮播图的地方 AspectRatio( aspectRatio...(); } List<Widget AspecRaticImgs(List<String imgUrl) { return imgUrl.map<Widget ((url){ return CachedNetworkImage...(//这个加载更加舒服,当在加载的时候,有一个加载进度 imageUrl: url, height: 400, fit: BoxFit.cover, placeholder: CustomWidgets.loadingPlaceHolder

    1.4K21

    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 等只有几个状态),建议加到索引

    51030

    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

    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) :@"商品简介占位

    71390

    了解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

    93810

    TypeError报错处理

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

    16710

    什么是 Vue3 指令?

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

    22210

    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

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

    实现图片懒加载的原理 图片懒加载的实现原理:将图片的地址放在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)引入插件 <script src...图片占位 }); 5.原生js实现图片懒加载 获取到所有需要用到的高度,和加载的图片,修该data-set 属性实现懒加载 html部分 <img data-set ="img/one.jpg" src

    1.7K10

    TypeError报错处理

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

    15810
    领券