Flutter Image(图片)
Image是一个用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。
Image 有许多的静态函数:
- new Image.asset - 用于从资源目录的显示图片。
- new Image.network - 用于从网络上显示图片。
- new Image.file - 用于从文件里显示图片。
- new Image.memory - 用于从内存里(Uint8List)显示图片。
// 资源图片
new Image.asset('imgs/logo.jpeg'),
//网络图片
new Image.network(
'https://flutter.io/images/homepage/header-illustration.png'),
// 本地文件图片
new Image.file(new File("/Users/gs/Downloads/1.jpeg")),
// Uint8List图片
new Image.memory(bytes),
//使用ImageProvider加载图片
new Image(image: new NetworkImage("https://flutter.io/images/homepage/screenshot-2.png"))
Image 有以下常用属性:
- alignment → AlignmentGeometry - 图像边界内对齐图像。
- centerSlice → Rect - 九片图像的中心切片。
- color → Color - 该颜色与每个图像像素混合colorBlendMode。
- colorBlendMode → BlendMode - 用于 color 与此图像结合使用。
- fit → BoxFit - 图像在布局中分配的空间。
- gaplessPlayback → bool - 当图像提供者发生变化时,是继续显示旧图像(true)还是暂时不显示(false)。
- image → ImageProvider - 要显示的图像。
- matchTextDirection → bool - 是否在图像的方向上绘制图像 TextDirection。
- repeat → ImageRepeat - 未充分容器时,是否重复图片。
- height → double - 图像的高度。
- width → double - 图像的宽度。
圆角图片
Image 是不支持圆角和阴影的,目前可以通过使用 CircleAvatar 和 Container 实现。
var img = 'https://b-ssl.duitang.com/uploads/item/' +
'201602/15/20160215235057_EU3tS.thumb.700_0.jpeg'; new CircleAvatar(
backgroundImage: new NetworkImage(url),
radius: 100.0, // --> 半径越大,图片越大
),
使用 Container 实现,其原理是把图片放在 decoration 里,而不是 child 里,因为把图片放在 child 里并设置 borderRadius 时会出现一个图片穿透的问题,Container 还没有 overflow 属性。
new Container(
width: 200.0,
height: 200.0,
margin: const EdgeInsets.all(20.0),
decoration: new BoxDecoration(
color: Colors.white,
image: new DecorationImage(image: new NetworkImage(this.imgsrc), fit: BoxFit.cover),
shape: BoxShape.circle,
),
),
上面实现的都是一个圆形图片,下面的实现一个真正的圆角图片。
new Container(
width: 200.0,
height: 200.0,
margin: const EdgeInsets.all(20.0),
decoration: new BoxDecoration(
color: Colors.white,
image: new DecorationImage(image: new NetworkImage(this.imgsrc), fit: BoxFit.cover),
shape: BoxShape.rectangle, // <-- 这里需要设置为 rectangle
borderRadius: new BorderRadius.all(
const Radius.circular(20.0), // <-- rectangle 时,BorderRadius 才有效
),
),
),
Flutter Image(图片)的更多相关文章
- Flutter裁剪图片
最近在学习中需要用到裁剪图片,记录一下解决方法 思路: 使用canvas的drawImageRect()方法,对Image进行裁剪,这里的Image需要 'dart:ui' 库中的Image. 1. ...
- flutter的 图片组件基本使用
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends Statele ...
- Flutter 实现图片裁剪
实现原理很简单 ,自己绘制一个裁剪框, 根据手势 选择到适合的位置 ,然后将选中的区域绘制到一个新的图片上,从而完成裁剪 裁剪框的绘制 这里我是根据点来连线的 因为每个点上会绘制一个拉伸的标识符 ...
- Flutter设置图片为正方形
AspectRatio( aspectRatio:/, child:Image.network("src") )
- 解决flutter的image_cropper组件引入报错问题
在使用flutter的图片裁剪组件image_cropper,github:https://github.com/hnvn/flutter_image_cropper 根据它的要求,安卓需要在文件[A ...
- 转:Flutter开发中踩过的坑
记录一下入手Flutter后实际开发中踩过的一些坑,这些坑希望后来者踩的越少越好.本文章默认读者已经掌握Flutter初步开发基础. 坑1问题:在debug模式下,App启动第一个页面会很慢,甚至是黑 ...
- Flutter学习笔记(36)--常用内置动画
如需转载,请注明出处:Flutter学习笔记(36)--常用内置动画 Flutter给我们提供了很多而且很好用的内置动画,这些动画仅仅需要简单的几行代码就可以实现一些不错的效果,Flutter的动画分 ...
- Flutter 异常处理之图片篇
背景 说到异常处理,你可能直接会认为不就是 try-catch 的事情,至于写一篇文章单独来说明吗? 如果你是这么想的,那么本篇说不定会给你惊喜哦~ 而且本篇聚焦在图片的异常处理. 场景 学以致用,有 ...
- flutter 动画双指放大图片
class GridAnimation extends StatefulWidget { @override State<StatefulWidget> createState() { r ...
- 技术胖Flutter第四季-23静态资源和项目图片的处理
技术胖Flutter第四季-23静态资源和项目图片的处理 视频地址:https://www.bilibili.com/video/av35800108/?p=24 项目中引用图片静态资源文件 这里就是 ...
随机推荐
- SDN第六次上机作业
1.实验拓扑 实验拓扑图如下: 搭建代码如下: 创建py脚本文件,并编写代码,如下: class MyTopo(Topo): def __init__(self): # initilaize topo ...
- 刷题记录:[BUUCTF 2018]Online Tool
目录 刷题记录:[BUUCTF 2018]Online Tool 一.知识点 1.escapeshellarg和escapeshellcmd使用不当导致rce 刷题记录:[BUUCTF 2018]On ...
- CTF RCE(远程代码执行)
目录 php代码执行 一.相关函数 1.代码注入 2.命令执行 二.命令执行的绕过 1.命令执行的分隔符 2.空格代替 3.绕过 4.命令执行的各种符号 三.命令无回显的情况 1.判断 2.利用 四. ...
- 在IDEA上对SpringBoot项目配置Devtools实现热部署
spring为开发者提供了一个名为spring-boot-devtools的模块来使Spring Boot应用支持热部署,提高开发者的开发效率,无需手动重启Spring Boot应用. devtool ...
- 隐藏一个button的方法(2种) 写出一个button的按钮(2种)
display:none;visibility:hidden: <input type = button><button>这是一个按钮 </button>
- Python常用模块大全
Python常用模块大全 os模块: os.remove() 删除文件 os.unlink() 删除文件 os.rename() 重命名文件 os.listdir() 列出指定目录下所有文件 os.c ...
- PG11开启WAL归档
-创建归档目录 mkdir -p $PGDATA/archive_wals chown -R postgres.postgres $PGDATA/archive_wals -修改参数(在配置文件中配置 ...
- easyui 如何为datagrid添加自定义列属性(如:width,align,editor)
我在实际业务需要为datagrid添加一个自定义属性 原先的datagrid列属性包括:title.width.align.formattter.editor等 我们可以通过datagrid的一个方法 ...
- PHP 发送 POST 值到任意 url
以下方法可以实现将 POST 值发送到 url,并获取返回值 $url = 'http://www.someurl.com'; $myvars = 'myvar1=' . $myvar1 . '&am ...
- vue---自定义指令的使用
在vue开发项目中,指令的使用场景也是比较多的,那么该如何定义使用呢? 找到 src / directive 下新建 gender 目录,下面新建 index.js 和 gender.js index ...