【自学Flutter】3.2 图片的填充样式
2024-05-29 19:04:29
3.2 图片的填充样式
0.原图
1.源代码
import 'package:flutter/material.dart';void main () => runApp(MyApp());class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context ){return MaterialApp(title:'All Widget Usages',home:Scaffold(body:Center(child:Row(children: <Widget>[Column(children: <Widget>[Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.blue,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.fitWidth,),),Text("fitWidth"),Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.orange,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.cover,),),Text("cover"),Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.red,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.contain,),),Text("contain"),Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.yellow,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.fill,),),Text("fill"),],),Column(children: <Widget>[Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.black,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.fitHeight,),),Text("fitHeight"),Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.blue,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.scaleDown,),),Text("scaleDown"),Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.blue,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.none,),),Text("none"),],),],),)),);}
}
2.解释源代码
import 'package:flutter/material.dart';void main () => runApp(MyApp());class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context ){return MaterialApp(title:'All Widget Usages',home:Scaffold(body:Center(child:Row(children: <Widget>[Column(children: <Widget>[//容器，相当于divContainer(//外边距margin: EdgeInsets.all(10.0),//宽度width: 120.0,//高度height: 120.0,//背景颜色color: Colors.blue,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",//填充样式fit: BoxFit.fitWidth,),),Text("fitWidth"),Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.orange,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.cover,),),Text("cover"),Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.red,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.contain,),),Text("contain"),Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.yellow,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.fill,),),Text("fill"),],),Column(children: <Widget>[Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.black,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.fitHeight,),),Text("fitHeight"),Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.blue,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.scaleDown,),),Text("scaleDown"),Container(margin: EdgeInsets.all(10.0),width: 120.0,height: 120.0,color: Colors.blue,child: Image.network("https://img.ivsky.com/img/tupian/t/201411/27/weixiao_de_ningmeng_3d_sheji.jpg",fit: BoxFit.none,),),Text("none"),],),],),)),);}
}
3.效果图
【自学Flutter】3.2 图片的填充样式相关推荐
- div背景图片完整填充样式设置---background、background-size、background-attachment
<div>图片</div> <style> div{ background: url(images/images/bg.jpg) no-repeat; b ...
- Flutter 实现背景图片毛玻璃效果
前言 继续我们绘图相关篇章,这次我们来看看如何使用 CustomPaint 实现毛玻璃背景图效果.毛玻璃背景图其实就是将图片进行一定程度的模糊,背景图经过模糊后更加虚幻,使得前景和后景就会有层次感.相 ...
- Python批量设置pptx文件中文本框边框与填充样式（含20分钟视频讲解）
近期会议: 10月30-11月1日 全国高校Python课程高级研修班(苏州) 推荐图书: <Python程序设计(第3版)>,(ISBN:978-7-302-55083-9),董付国,清 ...
- html让文本框左剧中对齐_Python批量设置pptx文件中文本框边框与填充样式（含20分钟视频讲解）...
近期会议:10月30-11月1日 全国高校Python课程高级研修班(苏州)推荐图书:<Python程序设计(第3版)>,(ISBN:978-7-302-55083-9),董付国,清华大学 ...
- html背景图片内填充,CSS基础——使用图片填充元素背景
在网页设计中,使用图片来填充元素背景,可以让元素背景呈现丰富多彩的外观.使用图片填充元素背景的常用样式标签有background-image.background-repeat.background- ...
- Flutter 学习 之 图片的选择、裁切、保存
在实际任务中免不了对图片进行裁切 文件格式转换 图片的选取等操作 这里做一个记录 1. Flutter 图片选择工具 image_picker 2. 图片裁切工具 image_cropper 3. 图 ...
- android drawpath填充,Android如何用图片来填充Path封闭路径
刚刚接触安卓,最近在做一个小项目,用path根据四个点坐标绘制了一个矩形,需要用图片来填充矩形.因为根据路径绘制的矩形是倾斜的,所以填充图片不太容易,经过查资料,通过试验得到了一种方法,分享一下: / ...
- webpack：全局变量、图片处理、样式兼容
文章目录 webpack:全局变量.图片处理.样式兼容 前情回顾 全局变量 图片处理(三种方式) 模块化 样式兼容性 webpack:全局变量.图片处理.样式兼容 前情回顾 装载器loader(加载) ...
- css 如何让背景图片拉伸填充避免重复显示
如何让背景图片拉伸填充,这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修 ...
- img 错误样式css,css设置图片大小_css 控制img图片的大小样式
摘要 腾兴网为您分享:css 控制img图片的大小样式,掌上财富,优品多多,问作业,淘客联盟等软件知识,以及手机游戏开挂神器,au补丁,局域网监测,苹果录屏专家,重复文件删除,易通教育,章鱼输入法,爱 ...
最新文章
- useradd 命令详解 - [命令操作]
- Crystal Office Maple中文版
- matlab的index函数,写论文第九天：MATLAB之rsindex函数
- 新纳米结构能加快电子设备运行
- Python快速学习09： 函数的参数
- Angular2.x-主/细节组件
- 2019 Android 高级面试题总结 从java语言到AIDL使用与原理
- 如何插卡虚拟机 mysql_怎么在虚拟机中搭建mysql服务器
- 【转】SQL语句删除和添加外键、主键
- python 报了错TypeError: sequence item 0: expected str instance, int found
- 信息学奥赛 python 教程_python抓取信息学奥赛一本通OJ题库
- 数据总线和地址总线区别是什么?作用分别是什么
- 2020年中国SCADA行业产值、市场规模及竞争格局分析[图]
- 云服务器分割成虚拟主机销售,IDC行业为何兴起云虚拟主机业务
- Python-函数入参和全局变量
- AI中插入带圆圈的1-20数字
- C#控件开发---控件属性编辑器
- 通达信插件获取并存储通达信商品指数的实时数据
- 纪念我的纪念--转正申请
- 基于STM32F103C8T6与ESP8266的物联网智能温度采集与蓝牙OLED数字钟的设计与实现