当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. ios逆向工程-内部钩子(Method Swizzling)

    Method Swizzling(方法调配) 怎么说呢,先了解什么是钩子为什么用钩子,学过C++的朋友应该清楚,hook就是用来获得(截断/改变)底层调用的方法.这样我们可以自由的修改或者读取一些想要 ...

  2. HDU1576 A/B

    暴力出奇迹,我就知道没取余那么正当,肯定有什么奇淫怪巧,果然5分钟A掉. #include<cstdio> #include<cstdlib> #include<iost ...

  3. BZOJ1096 ZJOI2007 仓库建设 【斜率优化DP】

    BZOJ1096 ZJOI2007 仓库建设 Description L公司有N个工厂,由高到底分布在一座山上.如图所示,工厂1在山顶,工厂N在山脚.由于这座山处于高原内陆地区(干燥少雨),L公司一般 ...

  4. For input string: "null"

    java.lang.NumberFormatException: For input string: "null" 在开发中你是否遇到过这样的问题,不管请求到的值是什么都能进入不为 ...

  5. 《DSP using MATLAB》示例 Example6.7

    代码: M = 32; alpha = (M-1)/2; magHk = [1, 1, 1, 0.5, zeros(1, 25), 0.5, 1, 1]; k1 = 0:15; k2 = 16:M-1 ...

  6. [MEF] 学习之一 入门级的简单Demo(转)

    MEF 的精髓在于插件式开发,方便扩展. 我学东西,习惯性的先搞的最简单的Demo出来,看看有没有好玩的东东,然后继续深入.这个博文,不谈大道理,看demo说事儿. 至于概念,请google ,大把大 ...

  7. WPF自适应可关闭的TabControl 类似浏览器的标签页(转)

    效果如图: 虽然说是自适应可关闭的TabControl,但TabControl并不需要改动,不如叫自适应可关闭的TabItem. 大体思路:建一个用户控件,继承自TabItem,里面放个按钮,点击的时 ...

  8. 在使用windows调用Hadoop 错误 /bin/bash: line 0: fg: no job control一般解决方法

    在使用windows调用Hadoop yarn平台的时候,一般都会遇到如下的错误: 2014-05-28 17:32:19,761 WARN org.apache.hadoop.yarn.server ...

  9. 【备忘录】CentOS服务器mysql忘记root密码恢复

    mysql的root忘记,现无法操作数据库 停止mysql服务service  mysql stop 然后使用如下的参数启动mysql, --skip-grant-tables会跳过mysql的授权 ...

  10. mysql存储引擎之innodb学习

    innodb引擎特点1.支持事务:支持4个事务隔离级别,支持多版本读. 2.行级锁定(更新时一般是锁定当前行):通过索引实现,全表扫描仍然会是表锁,注意间隙 锁的影响 3.读写阻塞与事务隔离级别有关 ...