当container指定了大小时,里面放入图片后,图片是居中自适应的,根据图片的大小,垂直居中或者水平居中。因为Image的默认自适应就是Contain,

BoxFit.Contain

如果container中展示图片想按照更多的特性展示,可以在图片外面使用FittedBox,或者就直接使用图片自带的fit特性

FittedBox是一个适应组件,可以对子元素按照某种适应性展示

  @override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
Container(
width: 130.0,
height: 130.0,
child: FittedBox(
fit:BoxFit.cover ,
child:Image.network('https://pic2.zhimg.com/50/v2-710b7a6fea12a7203945b666790b7181_hd.jpg'),)
)
],);
}

image本身也具有各种适应特性

  @override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
Container(
child: Image.network('https://pic2.zhimg.com/50/v2-710b7a6fea12a7203945b666790b7181_hd.jpg',
width: 130,height: 130,
fit: BoxFit.cover,), )
],);
}

AspectRatio是一个比例约束组件

比如我想展示一个banner,不知道屏幕的宽度,但是我想按照宽高比4/1的比例展示,再利用BoxFit.cover对图片做适应的处理

 AspectRatio(
aspectRatio: 4.0/1.0,
child: Container(
child: Image.network(
'https://pic2.zhimg.com/50/v2-6416ef6d3181117a0177275286fac8f3_hd.jpg',
fit: BoxFit.cover, ),
color: Colors.blue,),
),

flutter container image FittedBox AspectRatio的更多相关文章

  1. flutter Container组件和Text组件

    在开始之前,我们先写一个最简单的入口文件:     后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...

  2. Flutter Container容器组件、Text文本组件详解

    import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends Stateles ...

  3. Flutter Container 组件、Text 组件详解

    Text 组件 textAlign     文本对齐方式(center 居中,left 左对齐,right 右对齐,justfy 两端对齐) textDirection   文本方向(ltr 从左至右 ...

  4. Flutter——Container组件(容器组件)

    名称 功能 alignment topCenter:顶部居中对齐 topLeft:顶部左对齐 topRight:顶部右对齐 center:水平垂直居中对齐 centerLeft:垂直居中水平居左对齐 ...

  5. Flutter 宽高比(比率)控件 AspectRatio

    const AspectRatio({ Key key, @required this.aspectRatio, Widget child,}) void main() {  runApp(    n ...

  6. Flutter 布局控件完结篇

    本文对Flutter的29种布局控件进行了总结分类,讲解一些布局上的优化策略,以及面对具体的布局时,如何去选择控件. 1. 系列文章 Flutter 布局详解 Flutter 布局(一)- Conta ...

  7. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  8. 全网最详细的一篇Flutter 尺寸限制类容器总结

    Flutter中尺寸限制类容器组件包括ConstrainedBox.UnconstrainedBox.SizedBox.AspectRatio.FractionallySizedBox.Limited ...

  9. Flutter获取屏幕宽高和Widget大小

    我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情,在 Flutter 中,我们可以使用如下方法来获取屏幕或者 widget 的宽高. MediaQuery 一般情况下, ...

随机推荐

  1. Beyond Compare3 注册密钥和添加到右键菜单

    本人使用的是 Beyond Compare 3 ,版本 3.3.8(build 16340),密钥应收Beyond Compare 3都能够使用. 如想查看密钥,请参考本文末尾的隐藏内容 Beyond ...

  2. eclipse导出jar,再转换为exe可执行程序

    转自: https://blog.csdn.net/mommomm/article/details/8227876 若只想知道如何把jar转换成exe,直接看第四步即可. 一.导出jar文件: 选中你 ...

  3. fileupload页面跳转找不到原页面的解决方法

    做了个上传图片的功能,之前做的全都对,完全可以实现,但是后来再弄的时候,只要FileUpload控件里面有字(选择了图片),再按button.它尽然不执行button1_click事件,直接页面跳转, ...

  4. 封装与继承(PHP学习)

    什么是封装? 答:封装时不知道内部构造,对外部只展现功能的这种行为.例如:收音机,你不知道收音机内部的构造,但是你知道收音机是能用来听广播的. 在PHP中,封装是,不对外公布,属性和方法,这些属性和方 ...

  5. php 操作提示框

    /** * 跳转 * @param type $msg * @param type $url */ protected function jump($msg, $url) { $html = < ...

  6. (转)Inno Setup入门(五)——添加readme文件

    本文转载自:http://blog.csdn.net/yushanddddfenghailin/article/details/17250771 这个实现起来很简单,就是在[files]段中的某个预先 ...

  7. Java 成员变量和局部变量

    1.成员变量 在类中定义,用来描述对象将要有什么. 2.局部变量 在类的方法中定义,在方法中临时保存数据. 成员变量和局部变量的区别 作用域不同: 局部变量的作用域仅限于定义它的方法 成员变量的作用域 ...

  8. sorl基本原理

    索引原理 场景:小时候我们都使用过新华字典,妈妈叫你翻开第38页,找到“坑爹”所在的位置,此时你会怎么查呢?毫无疑问,你的眼睛会从38页的第一个字开始从头至尾地扫描,直到找到“坑爹”二字为止.这种搜索 ...

  9. Java-Runoob:Java StringBuffer 类

    ylbtech-Java-Runoob:Java StringBuffer 类 1.返回顶部 1. Java StringBuffer 和 StringBuilder 类 当对字符串进行修改的时候,需 ...

  10. 杂项-Server:Serv-U

    ylbtech-杂项-Server:Serv-U Serv-U FTP Server,是一种被广泛运用的FTP服务器端软件,支持3x/9x/ME/NT/2K等全Windows系列.可以设定多个FTP服 ...