当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. MAC OS环境下搭建基于Python语言的appium自动化测试环境

    #1 安装JDK java -version #2 下载SDK http://adt.android-studio.org/ 下载adt #3 配置sdk环境变量 打开终端,依次输入命令 vim .b ...

  2. 《DSP using MATLAB》示例9.1

    前段时间发生许多事,主要是楼盘开发商资金链紧张,无法通过验收,拿不到两书一表(住宅质量保证书.住宅使用说明书.房屋建筑工程竣工验收备案表), 各种配套设施都没有,就在这条件下还强制我们业主收房,心塞, ...

  3. 《DSP using MATLAB》示例Example 8.6

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  4. WinForm窗体继承自定义的模板窗体出错

    在开发Winform程序的时候,我们往往需要根据需要做一些自定义的控件模块,这样可以给系统模块重复利用,或者实现更好的效果等功能.而今天自定义一个窗体,然后子窗体继承的时候出现了一点问题. 问题: 在 ...

  5. 再谈zabbix 邮件通知配置(不用脚本,简单配置就可以了)

    备注: 安装过zabbix 的人,大家都应该了解,后者查询网上的资料邮件通知一般是编写一个脚本,即报警媒介类型,创建一个script类似的 然后编写脚本,进行发送,但是实际上,系统内置的邮件发送还是比 ...

  6. Apache Kafka 0.9消费者客户端

    当Kafka最初创建时,它与Scala生产者和消费者客户端一起运送.随着时间的推移,我们开始意识到这些API的许多限制.例如,我们有一个“高级”消费者API,它支持消费者组并处理故障转移,但不支持许多 ...

  7. xunsearch的使用(二)

    1.查看配置文件vim /data/local/xunsearch/sdk/php/app/demo.ini [pid] type = id [subject] type = title [messa ...

  8. kali openvas安装

    最新的kali需要用apt-get安装后使用 安装 apt-get install openvas 自动设置 openvas-setup 检测设置 openvas-check-setup 如果检测没有 ...

  9. Unit06: 状态管理-cookie

    Unit06: 状态管理-cookie web package web; import java.io.IOException; import java.io.PrintWriter; import ...

  10. 对SQLite数据库操作 操作db文件

    sqlite数据库就是一个DB文件.  程序每操作一次数据库都要读一次 .DB  文件 .  这个文件就是这个SQLite数据库. 如果需要依赖包的可以联系我 工具类: package com.hot ...