Flutter学习 — 用占位符淡入淡出的显示图片

效果图一：

由于是网络图片，加载速度由网速决定，所以先显示进度条圈圈

效果图二：

加载完毕后，淡入淡出的显示图片，不是一下子显示的哟！

导入依赖：

transparent_image: ^1.0.0

代码+注释：

import 'package:chapter02one/Api.dart';
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';void main() {runApp(new MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {final title = 'Fade in images';return new MaterialApp(title: title,home: new Scaffold(appBar: new AppBar(title: new Text(title),),body: new Stack(children: <Widget>[new Center(child: new CircularProgressIndicator()),new Center(/*** FadeInImage.memoryNetwork* 正在加载时，会显示加载进度条* 加载完毕后，会慢慢淡入淡出的显示图片*/child: new FadeInImage.memoryNetwork(placeholder: kTransparentImage,image:'${Api.URL}/aa.png',),),],),),);}
}

喜欢记得点个赞哟，我是王睿，很高兴认识大家！

更多原理请参考谷歌官网：
用占位符淡入图片

Flutter学习 — 用占位符淡入淡出的显示图片相关推荐

Flutter学习笔记（10）--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
浅尝flutter中的动画（淡入淡出）
在移动端开发中,经常会有一些动画交互,比如淡入淡出,效果如图: 因为官方封装好了AnimatedOpacity Widget,开箱即用,所以我们用起来很方便,代码量很少,做少量配置即可,所以,全部代码 ...
Mr.J-- jQuery学习笔记(十七)--动画淡入淡出弹窗广告
之前写过动画的隐藏与显示:Mr.J-- jQuery学习笔记(十四)--动画显示隐藏动画隐藏与显示的一个小demo--对联广告:Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告展开 ...
python 学习系列（3）读取并显示图片的两种方法
python 读取并显示图片的两种方法在 python 中除了用 opencv,也可以用 matplotlib 和 PIL 这两个库操作图片.本人偏爱 matpoltlib,因为它的语法更像 mat ...
Flutter 淡入淡出效果
动漫教给我们的道理,哪一句让你眼眶湿润了 Animation teaches us the truth, which one let your eyes wet Widget 的淡入淡出效果 clas ...
CSS自适应的占位符效果
一种不错的自适应input效果,分享一下. html section : 1 <div style="width:500px;height:500px;margin:300px aut ...
如何为“选择”框创建占位符？
我正在使用占位符进行文本输入,效果很好. 但是我也想为我的选择框使用一个占位符. 当然,我可以使用以下代码: <select><option value=""&g ...
JQuery:多张图片的淡入淡出效果。
我们要实现一个这样子的一个动画:多张图片在相同的位置淡入淡出,实现图片的轮流展示.具体实现的思路: 使用定时器setInterval方法,setInterval(<要调用的方法>,时间延时 ...
你会用PPT中的图片占位符吗？超级好用，不错的技能
在设计PPT的时候,或许大部分人都不离开图片的使用,不论是使用下载的素材还是自己设计的PPT,都有图片的存在. PPT中的图片能增加页面的设计感和场景感,比如下面这些案例中的图片使用. 但是,这时就会 ...
Blazor University （21）使用 RenderFragments 模板化组件 —— 传递占位符
原文链接:https://blazor-university.com/templating-components-with-renderfragements/passing-placeholders- ...

Flutter学习 — 用占位符淡入淡出的显示图片

效果图一：

效果图二：

导入依赖：

代码+注释：

喜欢记得点个赞哟，我是王睿，很高兴认识大家！

Flutter学习 — 用占位符淡入淡出的显示图片相关推荐

最新文章

热门文章