当前位置:网站首页>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的学习。
效果图:
边栏推荐
猜你喜欢
十分钟教会你如何使用VitePress搭建及部署个人博客站点
字节秋招二面把我干懵了,问我SYN报文什么情况下会被丢弃?
数字化转型之支撑保障单元
ABAP interview questions: how to use the System CALL interface of the ABAP programming language, direct execution ABAP server operating System's shell command?
一甲子,正青春,CCF创建六十周年庆典在苏州举行
IDEA close/open reference prompt Usages
软件测试——金融测试类面试题,看完直接去面试了
Here comes the question: Can I successfully apply for 8G memory on a machine with 4GB physical memory?
The redis library cannot be imported
Byte Qiu Zhao confused me on both sides, and asked me under what circumstances would the SYN message be discarded?
随机推荐
程序员的专属浪漫——用3D Engine 5分钟实现烟花绽放效果
How to upload local file trial version in binary mode in ABAP report
我们真的需要DApp吗?App真的不能满足我们的幻想吗?
AQS Synchronization Component - FutureTask Analysis and Use Cases
Intranet penetration tool ngrok usage tutorial
The batch size does not have to be a power of 2!The latest conclusions of senior ML scholars
#Internet of Things essay#Xiaoxiong pie equipment development actual combat
GPT-3组合DALL·E,60秒内搞定游戏设定和原型动画!网友看后:这游戏想玩
微信一面:一致性哈希是什么,使用场景,解决了什么问题?
基于CAP组件实现补偿事务与幂等性保障
Ways to prevent data fraud
两个链表相加
The FFmpeg library is configured and used on win10 (libx264 is not configured)
Report: The number of students who want to learn AI has increased by 200%, and there are not enough teachers
MySQL查询性能优化七种武器之索引潜水
微服务架构的核心关键点
WeChat payment development process
太卷了... 腾讯一面被问到内存满了,会发生什么?
合并两个有序列表
1-hour live broadcast recruitment order: industry big names share dry goods, and enterprise registration opens丨qubit·viewpoint