显示图片的组件

以下是几种加载图片路径方式:

  • Image.asset 加载asset项目资源中的文件
  • Image.network 加载网络资源图片,通过url加载
  • Image.file 加载本地文件中的图片
  • Image.memory 加载Uint8List中的图片

图片的支持格式有:JPEG, PNG, GIF, 动画GIF, WebP, 动画WebP, BMP, WBMP

使用Image.asset为例:

  • 首先在你的项目目录下新建一个文件夹images
  • 然后在pubspec.yaml文件中配置路径
  • 最后在需要引入图片的地方进行引入

child: new Container(
width: 400.0,
height: 300.0,
child: new Image.asset(
'images/2-normal.png',
alignment: Alignment.topLeft,
color: Colors.green,
colorBlendMode: BlendMode.dstATop,
),
)

上面就是资源图片的引入方法,下面则看看主要的几个属性:

1、alignment

图片的对齐方式,也是有以下几个选择:

  • topCenter:顶部居中对齐
  • topLeft:顶部左对齐
  • topRight:顶部右对齐
  • center:水平垂直居中对齐
  • centerLeft:垂直居中水平居左对齐
  • centerRight:垂直居中水平居右对齐
  • bottomCenter底部居中对齐
  • bottomLeft:底部居左对齐
  • bottomRight:底部居右对齐

2、color和colorBlendMode

设置图片的背景颜色,通常和colorBlendMode配合一起使用,这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合,绿色背景和图片红色的混合。

3、fit

fit属性用来控制图片的拉伸和挤压,这都是根据父容器来的。

  • BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。

  • BoxFit.contain:全图显示,显示原比例,可能会有空隙。

  • BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。

  • BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。

  • BoxFit.fitHeight :高度充满(竖向充满),显示可能拉伸,可能裁切。

  • BoxFit.scaleDown:效果和contain差不多,但是此属性不允许显示超过源图片大小,可小不可大。

举个栗子:

child: new Image.asset(
'images/2-normal.png',
alignment: Alignment.center,
color: Colors.green,
colorBlendMode: BlendMode.dstATop,
fit: BoxFit.contain,
),

4、repeat

  • ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布。

  • ImageRepeat.repeatX: 横向重复,纵向不重复。

  • ImageRepeat.repeatY:纵向重复,横向不重复。

child: new Image.asset(
'images/2-normal.png',
alignment: Alignment.center,
color: Colors.green,
colorBlendMode: BlendMode.dstATop,
repeat: ImageRepeat.repeat,
),

5、更详细的属性需要,可以去官网查看:一键送达

Flutter常用组件(Widget)解析-Image的更多相关文章

  1. Flutter常用组件(Widget)解析-ListView

    一个可滚动的列表组件 不管在哪,列表组件都尤为重要和常用. 首先来看个例子: import 'package:flutter/material.dart'; void main () => ru ...

  2. Flutter常用组件(Widget)解析-Container

    一个组件它往往包含了一些常见的painting, positioning和sizing这样的小部件. Container相当于我们常用的div,在Flutter中用的非常多,现在来看看Containe ...

  3. Flutter常用组件(Widget)解析-Scaffold

    实现一个应用基本的布局结构. 举个栗子: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); clas ...

  4. Flutter常用组件(Widget)解析-Text

    单一格式的文本. 文本组件是以字符串形式显示的单一格式,这个文本字符串可以是多行显示也可以是单独一行显示,主要取决于你的布局限制. 这样式内容是可选择的,如果你省略了,则会使用文本的默认样式来显示.如 ...

  5. Flutter 常用组件

    无状态组件(StatelessWidget)是不可变的,这意味着它的属性不能改变,所有的值都是最终的. 有状态组件(StatefulWidget)持有的状态可能在Widget生命周期中发生变化.实现一 ...

  6. Flutter 基础组件:Widget简介

    概念 在Flutter中几乎所有的对象都是一个Widget.与原生开发中"控件"不同的是,Flutter中的Widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的 ...

  7. Ext 常用组件解析

    Ext 常用组件解析 Panel 定义&常用属性 //1.使用initComponent Ext.define('MySecurity.view.resource.ResourcePanel' ...

  8. Ionic 常用组件解析

    Ionic 常用组件解析 $ionicModal(弹出窗口): //创建一个窗口 //此处注意目录的起始位置为app $ionicModal.fromTemplateUrl('app/security ...

  9. Flutter学习笔记(9)--组件Widget

    如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...

随机推荐

  1. Django学习手册 - ORM choice字段 如何在页面上显示值

    在module操作过程中使用choice字段: 核心: obj.get_字段名_display 定义module 数据结构: class msg(models.Model): choice = ( ( ...

  2. case7 淋巴瘤子类分类实验记录

    case7 淋巴瘤子类分类实验记录 简介 分类问题:3分类 (identifying three sub-types of lymphoma: Chronic Lymphocytic Leukemia ...

  3. SpringMVC——SpringMVC简介

    Spring web mvc 和Struts2 都属于表现层的框架,它是Spring 框架的一部分,我们可以从Spring 的整体结构中看得出来:

  4. Mybatis进阶学习笔记——关系查询——一对一查询

    用户和订单的需求 通过查询订单,查询用户,就是一对一查询 (1)自定义JavaBean(常用,推荐使用) <select id="queryOrderUser" result ...

  5. JDK7与8内存参数解析与修改

    JDK内存 jdk内存实际是jvm内存,jvm有一个运行时数据区,其实就是对这一部分的大小分配. 运行时数据区通常包括这几个部分:程序计数器(Program Counter Register).Jav ...

  6. 边沿检测方法-FPGA入门教程

    本节实验主要讲解FPGA开发中边沿检测方法,我们在设计中会经常用到.这个地方大家一定要理解. 1.1.1.原理介绍 学习HDL语言设计与其他语言不一样,HDL语言设计需要考虑更多的信号的电气特性,时序 ...

  7. 那些IT行业的经典定律

    几十年来,IT界有一些非常著名的定律,蕴含着行业发展的大智慧,非常有趣,略作收集总结,再加上一丁点自己的浅见~ 一.摩尔定律:价格不变,集成电路上可容纳的元器件数目,约每隔18个月便会翻一倍,性能也将 ...

  8. mac安装pyspider报错

    (env)$ pip3 uninstall pycurl (env)$ pip3 install --upgrade pip (env)$ export LDFLAGS=-L/usr/local/op ...

  9. mysql系列十二、mysql常用hint

    对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的hint功能.下面介绍一些常用的. 强制索引 FORCE ...

  10. zabbix3.0.4导入中文模板后乱码问题处理

    通过yum安装方式部署了zabbix3.0.4监控服务器,配置过程中发现当导入的模板中有中文时,图中的中文会变成方块 如下图所示: 这个问题是由于zabbix的web端没有中文字库,我们最需要把中文字 ...