Flutter 组件之 FadeInImage

最新推荐文章于 2024-05-15 22:39:24 发布

Tools_are

最新推荐文章于 2024-05-15 22:39:24 发布

阅读量265

点赞数

分类专栏： Flutter 组件文章标签： flutter android 前端 ios

本文链接：https://blog.csdn.net/Tools_are/article/details/129104072

版权

Flutter 组件专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Flutter 组件之 FadeInImage

1.简介

在加载图像时显示占位符，然后淡出占位符并在图像中淡出。

2.属性

placeholder：占位图
placeholderErrorBuilder：占位图绘制期间出错时回调，返回一个Widget
image：图像
imageErrorBuilder：图像绘制失败时回调返回一个Widget
excludeFromSemantics：是否在语义标签中排除此图像调试时有用
imageSemanticLabel：图像语义标签
fadeOutCurve：[占位符] 的淡出动画曲线
fadeOutDuration：[占位符] 的淡出动画时间
fadeInCurve：[图像] 的渐入动画曲线
fadeInDuration：[图像] 的渐入动画时间
width：图像宽度
height：图像高度
fit：BoxFit 控制图像的拉伸和挤压
placeholderFit：BoxFit 控制占位图的拉伸和挤压
alignment：对齐方式
repeat：图片占不满时，在某个方向重复，BoxFit.contain 有效
matchTextDirection：TextDirection的方向是否影响图像的布局起点

3.使用

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Tools_are

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

《Flutter 控件大全》第四十三个：FadeInImage

老孟Flutter

04-04

1503

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。在加载网络图片时通常需要一张展位图，当网络图片没有加载时先显示占位图，FadeInImage...

Flutter实战之Image和FadeInImage

菜鸟博客

12-18

2009

Flutter的Image 这个Widget提供了如下几种常用的方式加载不同的图片 Image.asset：用来加载本地资源图片（图片需要在pubsepc.yaml文件中配置） Image.file：用来加载本地File文件图片 Image.network：顾名思义，用来加载网络图片 Image.memory：用来加载Uint8List资源图片 Image：通过ImageProvider来加载图片...

参与评论您还未登录，请先登录后发表或查看评论

flutter：fadeInImage占位符淡入图片

Purple_JJ的博客

04-06

1084

从本地存储加载占位图， Flutter加载本地资源文件需要将本地资源放入assets中,assets就是一个资源目录,名字可以自定义.这个assets里面你可以放你需要的一些资源文件:图片,json文件等,也可以添加自定义字体等,其配置在pubspec.yaml文件中，如下图：在flutter中引入本地图片（字体）, 我们先在项目根目录建立一个images（fonts)文件夹, 把本地图片资源(字体)拖进去，在pubspec.yaml中配置, 特别注意, 一定要注意缩进, 否则无法读取图片路径。在页.

Flutter 中的 FadeInImage 小部件：全面指南

最新发布

smileKH的博客

05-15

491

是一个 Flutter 小部件，它在图片加载时提供了一个淡入效果。它非常适合用于展示从网络加载的大图，可以在图片完全加载之前先显示一个占位符，然后在图片加载完成后平滑地淡入。除了基本的用法，自定义占位符：你可以选择自定义的占位符图片，甚至是一个小部件。placeholder: CircularProgressIndicator(), // 使用进度指示器作为占位符错误处理: 当图片加载失败时，可以提供一个回退图片或小部件。// 图片加载失败时显示错误图标},

Flutter Widgets: Image

AndroidKt

05-26

1万+

介绍类结构构造方法属性值 child

Flutter 笔记 | Flutter 可滚动组件

川峰的博客

05-26

4284

Flutter组件学习（二）—— Image

ren1027538427的博客

07-16

870

Flutter组件学习（二）—— Image 24K纯帅豆关注 12018.11.30 11:07:56字数 1,006阅读 26,102 序言上一节中，我们讲了Flutter中Text组件的一些用法以及API，本节我们继续学习Flutter中的Image组件，同样先上图： image Image组件的构造方法在Android中，我们都知道，图片的显示方式有很多，资源图片、网络图片、文件图片等等，在Flutter中也有多种方式，用来加载不同形式的图片： ...

Flutter开发：给image设置圆角的方法

软贱开发攻城狮

03-03

2547

在Flutter开发过程中，一些基本的实现效果是层出不穷，各种基础性的设置都需要开发者很好的掌握，这样在开发过程中才能快速的开发，提高开发效率和进度。那么本博文分享一个在Flutter开发过程中比较常用的实现效果：给image组件添加圆角。在Flutter开发中，给image组件设置圆角效果，稍不留神就踩了坑，而且会耽误开发进度。首先分享一下网上无良教程关于给image组件设置圆角的方法，没有效果的，拿出来举例子是为了起警示作用： Center( child: Contain...

Flutter之ListView 嵌套不同的Item

涂文远的博客

07-02

1491

效果实现代码如下 home_page.dart import 'dart:convert'; import 'dart:ffi'; import 'package:flutter/material.dart'; import 'package:flutterwncq/constants/constants.dart' show AppUrls; import 'package:flutterwncq/models/index_data_bean.dart'; import 'package:..

【Flutter 组件集录】FadeInImage｜ 8月更文挑战

张风捷特烈的博客

08-10

110

前言：这是我参与8月更文挑战的第 10 天，活动详情查看：8月更文挑战。为应掘金的八月更文挑战，我准备在本月挑选 31 个以前没有介绍过的组件，进行全面分析和属性介绍。这些文章将来会作为 Flutter 组件集录的重要素材。希望可以坚持下去，你的支持将是我最大的动力~ | 本系列 |...

Flutter - 加载网络图片的几种方式

weixin_58134620的博客

03-19

1050

找工作是个很辛苦的事情，而且一般周期都比较长，有时候既看个人技术，也看运气。第一次找工作，最后的结果虽然不尽如人意，不过收获远比offer大。接下来就是针对自己的不足，好好努力了。最后为了节约大家的时间，我把我学习所用的资料和面试遇到的问题和答案都整理成了PDF文档，都可以分享给有需要的朋友，如有需要私信我【资料】或者**【点这里】免费领取**《Android面试复习资料汇总》比offer大。接下来就是针对自己的不足，好好努力了。

Flutter FadeInImage实现图片加载占位符和错误占位符

weixin_44911775的博客

05-26

1307

参考一参考二 FadeInImage( image: _addImageLoadListener(imageUrl), // TODO 未加载出来前的占位图 placeholder: AssetImage("xxx/xxx.jpg"), fit: BoxFit.fill, imageErrorBuilder: (context, error, stackTrace) { // TODO 图片加载错误后展示的

13、Flutter Widget - FadeInImage;

weixin_33712881的博客

03-07

2126

当你从网络下载图像时，如果想在等待下载时插入占位图可以使用FadeInImage; FadeInImage.assetNetwork( placeholder:'assets/waiting.png', image:'http://example.com/image.png', ) 复制代码如果想从内存中获取占位图: FadeInImage.memoryNetwork( height...

Flutter基础—常用控件之图片

热门推荐

咖啡花园

11-17

2万+

Image控件即图片控件，是显示图像的控件，Image控件有多种构造函数： new Image，用于从ImageProvider获取图像。 new Image.asset，用于使用key从AssetBundle获取图像。 new Image.network，用于从URL地址获取图像。 new Image.file，用于从File获取图像。为了自动执行像素密度感知资源分辨率，使用AssetImage

flutter 基础容器wdiget Image,FadeInImage,CachedNetworkImage

litter_lj的博客

07-02

1809

1.属性 Image({ Key key, @required ImageProvider image, String semanticLabel, bool excludeFromSemantics: false, double width, // 控件宽度 double height, // 控件高度 Color...

flutter 显示圆形头像

qq_32319999的博客

05-17

7202

第一种：new ClipOval( child: new FadeInImage.assetNetwork( placeholder: "images/normal_user_icon.webp",//预览图 fit: BoxFit.fitWidth, image:"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=346366...

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

qq_27494201的博客

06-18

1451

效果图一：由于是网络图片，加载速度由网速决定，所以先显示进度条圈圈效果图二：加载完毕后，淡入淡出的显示图片，不是一下子显示的哟！导入依赖： transparent_image: ^1.0.0 代码+注释： import 'package:chapter02one/Api.dart'; import 'package:flutter/material.dart'; import 'package:transparent_image/transparent_image.dart'; void ma

flutter中的几种图片加载方式

julystroy的博客

03-20

6051

图片加载对应的有本地和网络之别，其中囊括了原生和插件，现在介绍点常用的：本地图片加载：new Image.asset("images/tupian.png") 全路径填写，并在pubspec.yaml文件中注册网络图片加载：new Image.network( “https://cssccs”,fit: BoxFit.fill,width: 70,) 可以加载GIF 网络图片加载：...

Flutter Image

老孟Flutter

12-10

6329

文章目录1、加载网络图片2、加载本地图片1、设置pubspec.yaml2、Image.asset 加载3、加载sd卡上的图片1、通过path_provider获取本地路径4、几个常用的属性1、fit2、colorBlendMode3、repeat 1、加载网络图片 Image.network( 'http://pic1.win4000.com/pic/c/cf/cdc9836...