显示图片的组件

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

  • 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. 虚拟树研究-CheckBox初步判断只能在第一列

    //虚拟树研究-CheckBox初步判断只能在第一列 procedure TWindowsXPForm.XPTreeInitNode(Sender: TBaseVirtualTree; ParentN ...

  2. python - format函数 /class内置format方法

    format函数 # format函数 # 用于字符串格式化 # 基本用法: # 方式一:(位置方式) x = "{0}{1}{2}".format(1,2,3) print('1 ...

  3. python - logging模块应用

    logging日志模块应用: import logging # logging.basicConfig( # #定义日志级别,共5个级别,默认级别为warning级别,所以debug和info级别不添 ...

  4. ubuntu 安装lightgbm

    前提:安装好git.cmake 1. 安装lightgbm git clone --recursive https://github.com/Microsoft/LightGBM 2. 编译 下载好的 ...

  5. HTMl学习笔记02-编辑器

    工欲善其事,必先利其器 使用专业HTML编辑器来编辑HTML,推荐使用Notepad++,中文界面. 在Notepad++安装完成后,点击文件>新建.语言>H中选择HTML 在新建的文件输 ...

  6. vs2010补丁

    背景 我都不知道这是干啥的了.想起.net真是一把鼻涕一把泪.搞了这么久.net,也被它坑了好多.有这时间搞搞开源东西多好.看见下面还有tfs,想起当时有个java同事竟然用vss管理java代码,后 ...

  7. windows2008r2系统破解登录密码方法

    破解windows 2008 r2系统登录密码方法: 1.重启系统,使用windows2008r2安装光盘引导 按住shift+f10 2.切换到d:windows\system32目录(使用cmd. ...

  8. 自定义el标签

    编写java代码 package com.ycjk.common; public class FormatJSEltarg { public static String format(String s ...

  9. Linux安全配置步骤简述

    一.磁盘分区  1.如果是新安装系统,对磁盘分区应考虑安全性:   1)根目录(/).用户目录(/home).临时目录(/tmp)和/var目录应分开到不同的磁盘分区:   2)以上各目录所在分区的磁 ...

  10. Python-HTML 最强标签分类

    编程: 使用(展示)数据 存储数据 处理数据 前端 1. 前端是做什么的? 2. 我们为什么要学前端? 3. 前端都有哪些内容? 1. HTML 2. CSS 3. JavaScript 4.jQue ...