当前位置:网站首页>Flutter入门进阶之旅(五)Image Widget
Flutter入门进阶之旅(五)Image Widget
2022-08-09 12:04:00 【谢栋_】
往期专题回顾:
前面我们学习了Flutter中用于文本显示的Widget,比如我们显示一行或者一段基本文字会用到Text Widget,如果需要跟Text设置样式,颜色等属性,我们可以通过给Text指定style来定制TextStyle中的样式来展示我们需要的效果,对于文本输入控件,我们学习了TextField,了解到可以通过TextField完成简单的文本输入需求,可以通过InputDecoration给输入框添加样式,比如舒服辅助提示、边框、两边的icon等等。
今天我们来学习一下另外一个Widget---Image,顾名思义Image是用于展示图片的控件,他跟Text一样,同属于StatelessWidget,关于StatelessWidget跟StatefullWidget我会在稍后的文章中具体讲解,在此读者可暂且忽略这一知识点,在做原生Android开发时,我们可以给ImageView指定不同的图片来源,可以是来源网络、drawable、bitmap、文件等,在Flutter中同样支持加载不同来源的图片,只不过Flutter加载不同资源的图片跟原生Android稍微有点差别,下面我们一起进入本期的主题。
Flutter加载不同资源图片的方式:
- new Image, 用于从ImageProvider获取图像。
- new Image.asset, 用于从AssetBundle获取图像。
- new Image.network, 用于从URL获取图像。
- new Image.file, 用于从文件中获取图像。
- new Image.memory, 用于从内存中获取图像
在flutter中Image支持JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, 和 WBMP这几种图片格式。
1.从网络加载图片:
为了养成良好的代码阅读习惯,我们还是先来看下Image.network的构造方法
Image.network(String src, {
Key key,
double scale: 1.0,//缩小倍数
this.width,//宽
this.height,//高
this.color,
this.colorBlendMode,
this.fit, //填充方式
this.alignment: Alignment.center,
this.repeat: ImageRepeat.noRepeat, //图片排列方式
this.centerSlice,
this.matchTextDirection: false,
this.gaplessPlayback: false,
Map<String, String> headers,
})
通过构造方法,我们可以初步清楚的了解到在Flutter中加载网络图片,只需要在Image.network中指定图片的src,也就是目标图片的url即可,如果需要配置图片宽高、缩放比对应构造方法去写就好,下面实例代码,展示了从目标url上加载图片,并且把图片的宽高设置为500*500;
效果图:
示例代码:
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new ImageDemo()));
}
class ImageDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new TextField(
decoration: new InputDecoration(),
),
),
body: new Image.network("https://p1.ssl.qhmsg.com/dr/220__/t01d5ccfbf9d4500c75.jpg",width:500,height: 500,)
);
}
}
2.从项目本地目录加载图片:
Flutter中加载项目目录下的图片,需要我们先从pubspec.yaml中声明导入资源后,才能在dart文件中使用图片资源,不然即使图片存在项目目录下,在dart文件中你指定路径后也不能正常加载,这点读者应注意一下,跟我们写原生Android有点不同。
比如我在项目中把images文件夹下的两张图片aaa.png、a.png通过pubspec.yaml导入到项目中:
把上述代码中body部分换成Image.asset方式。
body: new Image.asset('images/aaa.png',width: 500,height: 500,)
关于Image.asset的构造方法跟network大同小异,我就不贴出来了,读者可自行查阅源码,下面看下我们从项目目录下加载的图片结束我们本期关于Image的学习。
效果图:
边栏推荐
猜你喜欢
Too much volume... Tencent was asked on the side that the memory was full, what would happen?
基于STM32+铂电阻设计的测温仪
太卷了... 腾讯一面被问到内存满了,会发生什么?
脱光衣服待着就能减肥,当真有这好事?
K个结点的组内逆序调整
#Internet of Things essay#Xiaoxiong pie equipment development actual combat
web course design
MySQL principle and optimization of Group By optimization techniques
告别手摇织布机的AI时代
[Interview high-frequency questions] Linked list high-frequency questions that can be gradually optimized
随机推荐
WeChat side: what is consistent hashing, usage scenarios, and what problems does it solve?
问题来了:4GB物理内存的机器上申请8G内存能成功吗?
一甲子,正青春,CCF创建六十周年庆典在苏州举行
【HCIP持续更新】IS-IS协议原理与配置
曲鸟全栈UI自动化教学(八):框架代码讲解和进一步优化
ansible-cmdb友好展示ansible收集主机信息
2022 Niu Ke Duo School (6) M. Z-Game on grid
【Untitled】
00后写个暑假作业,被监控成这笔样
FFmpeg在win10上编译安装(配置libx264)
十分钟教会你如何使用VitePress搭建及部署个人博客站点
京东架构师呕心整理:jvm与性能调优有哪些核心技术知识点
信息系统项目管理师必背核心考点(六十三)项目组合管理的主要过程&DIPP分析
箭头函数和普通函数的常见区别
【微服务~远程调用】整合RestTemplate、WebClient、Feign
IDEA close/open reference prompt Usages
数据挖掘-06
ABAP 面试题:如何使用 ABAP 编程语言的 System CALL 接口,直接执行 ABAP 服务器所在操作系统的 shell 命令?
又有大厂员工连续加班倒下/ 百度搜狗取消快照/ 马斯克生父不为他骄傲...今日更多新鲜事在此...
MySQL principle and optimization of Group By optimization techniques