【Flutter】基础组件【06】Image
1. 写在前面
在上篇文章中介绍了Flutter中的Icon组件，今天继续学习【Flutter】基础组件中的Image组件。
- 【基础语法合集】
【Flutter】Dart中的var、final 和 const基本使用
【Flutter】Dart数据类型之num
【Flutter】Dart数据类型之String
【Flutter】Dart的数据类型list&Map(数组和字典)
【Flutter】Dart的方法与箭头函数
【Flutter】Dart的方法中的可选参数、方法作为参数传递
【Flutter】Dart中的匿名函数、闭包
【Flutter】Dart中的类和对象
【Flutter】Dart中的构造函数
【Flutter】Dart的工厂构造方法&单例对象&初始化列表
【Flutter】Dart的类方法和对象操作符
【Flutter】Dart中的继承
【Flutter】Dart中的抽象类和接口
【Flutter】Dart中的Mixins混入你知道是什么吗？
- [基础组件合集]
【Flutter】基础组件【01】Text
【Flutter】基础组件【02】Container
【Flutter】基础组件【03】Scaffold
【Flutter】基础组件【04】Row/Column
【Flutter】基础组件【05】Icon
2. Image
Image 是一个显示图片的widget。
为指定图像的各种方式提供了一下几个构造函数：
- new Image，用于从ImageProvider获取图像。
- new Image.asset，用于从AssetBundle获取图像，从资源目录显示图片,需要在 pubspec.yaml 文件中声明。
- new Image.network，用于从 URL 获取图像。
- new Image.file，用于从File获取图像。
- nwe Image.memory，用于从Uint8List获取图像。
支持以下图像格式：JPEG、PNG、GIF、动画 GIF、WebP、动画 WebP、BMP 和 WBMP。底层平台可能支持其他格式。Flutter 会尝试调用平台 API 来解码无法识别的格式，如果平台 API 支持解码图像，Flutter 将能够渲染它。
要自动执行像素密度感知资产分辨率，请使用AssetImage指定图像并确保MaterialApp、WidgetsApp或MediaQuery小部件存在于小部件树中的Image小部件上方。
图像是使用paintImage绘制的，它更详细地描述了此类中各个字段的含义。
2.1 Image.network
默认构造函数可以与任何ImageProvider一起使用，例如 NetworkImage，以显示来自 Internet 的图像。
void main() {runApp(Container(color: Colors.white,child: const Image(image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),),));
}
- 运行结果
为方便起见 ，Image Widget 还提供了几个构造函数来显示不同类型的图像。在此示例中，使用Image.network 构造函数显示来自 Internet 的图像。
Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')
2.2 Image.asset
从资源目标获取图片，需要设置一下pubspec.yaml。
这里要注意，上下文的
对齐，多一个或者少一个空格都是不行的。
- 代码举例
void main() {runApp(Container(color: Colors.white,child: const Image(image: AssetImage('images/flutter.png')),));
}
- 运行结果
2.3 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更多内容请看【Flutter】基础组件【06】Image相关推荐
- 一份超级详细的Flutter基础组件练习示例，请查收！
学习B站技术胖的flutter基础课程整理的示例,为了平时方便查阅,同时希望能和大家一同进步~ Flutter基础组件 Hello world import 'package:flutter/mate ...
- Flutter 基础组件之 Text
终于安装好了 Flutter 的环境,既然入了坑,就一点一点学吧,Flutter 可以说一切皆组件吧,所以要熟练掌握各个基础组件的 API,然后才能在面对复杂需求的时候才能得心应手的将各个组件组合起来 ...
- 【Flutter -- 基础组件】Flutter 导航栏
文章目录 1. TabBar 1.1 代码 1.2 效果图 2. BottomNavigationBar 2.1 构建底部标签 2.2 创建导航栏 2.3 效果图 1. TabBar Flutter ...
- Flutter 基础组件之 Container
官方简介中,说 Container 组件是一个方便绘制.定位和调整子组件大小的组件. 首先 Container 会在 child 子组件周围填充 padding(包括 decoration 中存在的 ...
- Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见 学习Dart 基础知识 移步这里 安装flutter环境相关 移步这里 flutter基础组件使用相关 移步这里 文章目录 一 ...
- Flutter基础布局组件及实现
https://www.cnblogs.com/lxlx1798/p/11084904.html 一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Paddi ...
- Flutter(四)——基础组件
本文目录 前言 基础组件 Text 常用属性使用 Icon Image Button FlutterLogo 前言 你如果做过Android开发,那一定熟悉里面各种官方提供的布局,比如LinearLa ...
- 06.JavaSwing（基础组件——JLabel类）
软件界面是软件和用户之间的交流平台,而组件则是绘制软件界面的基本元素,是软件和用户之间的交流要素. 一.概述 JLabel组件用来显示文本和图像,可以只显示其一种,也可以同时显示.JLabel类提供了 ...
- 一个优秀的可定制化Flutter相册组件，看这一篇就够了
背景 在做图片.视频相关功能的时候,相册是一个绕不开的话题,因为大家基本都有从相册获取图片或者视频的需求.最直接的方式是调用系统相册接口,基本功能是满足的,一些高级功能就不行了,例如自定义UI.多选图 ...
- flutter 一直loading_开源 | FLUI : Flutter 的组件扩展集
在使用 Flutter 的过程中,总是不断的在与组件打交道,虽然 Flutter 官方已经有极为丰富的 Material Design 以及 iOS 风格的组件集合,但我们也需要不断的抽象,组合出一些 ...
最新文章
- Smarty 中的 if 语句条件修饰词
- 学容器必须懂 bridge 网络 - 每天5分钟玩转 Docker 容器技术（32）
- AcWing - 113 特殊排序(归并排序/二分)
- linux C下的setjmp与longjmp介绍
- Nginx负载均衡配置+keepalived高可用
- linux初级之总结复习
- 鲁大师原来真的姓鲁呀
- 学习廖雪峰的Git教程
- 计算机辅助翻译公开课,清华大学发布八门网络公开课
- 《成为乔布斯》读后感
- 计算机管理无法格式化硬盘,sd无法格式化怎么解决_电脑无法格式化sd卡怎么办-win7之家...
- 自定义Android工程的out目录
- 全国计算机等级考试安排表,2017年下半年（第49次）全国计算机等级考试安排表.PDF...
- 计算机图形学 期中大作业 俄罗斯方块
- 【Groovy】Json、Xml、Swing 生成器 ( Json 生成器 JsonBuilder | Xml 生成器 MarkupBuilder | Swing 生成器 SwingBuilder)
- Mac电脑系统设置WIWF热点
- 大语言模型将如何影响软件开发？
- 系统集成项目管理工程师10大管理
- 学英语《每日一歌》之take me to your heart
- 2023郑州大学工商管理学硕专业考研成功经验分享
热门文章