当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. HDU - 6172:Array Challenge (BM线性递推)

    题意:给出,三个函数,h,b,a,然后T次询问,每次给出n,求sqrt(an); 思路:不会推,但是感觉a应该是线性的,这个时候我们就可以用BM线性递推,自己求出前几项,然后放到模板里,就可以求了. ...

  2. test20190308

    测试 晚上考试,是 \(SCOI\ 2016\ Day\ 2\) 的题目. 妖怪 由于之前在洛谷上用三分水过去了,就很 \(naive\) 地打了一个三分就跑了.获得 \(10\) 分好成绩. 记 \ ...

  3. BZOJ5296 CQOI2018 破解D-H协议 【BSGS】

    BZOJ5296 CQOI2018Day1T1 破解D-H协议 Description Diffie-Hellman密钥交换协议是一种简单有效的密钥交换方法.它可以让通讯双方在没有事先约定密钥(密码) ...

  4. 自动将 NuGet 包的引用方式从 packages.config 升级为 PackageReference

    在前段时间我写了一篇迁移 csproj 格式的博客 将 WPF.UWP 以及其他各种类型的旧样式的 csproj 文件迁移成新样式的 csproj 文件,不过全过程是手工进行的,而且到最后处理 XAM ...

  5. 为什么 UEFI 方式启动的 U 盘必须使用 FAT32 文件系统?

    如果你希望更刺激地安装 Windows,那么你需要了解很多 Windows 系统相关的问题. 为什么 UEFI 方式启动的 U 盘必须使用 FAT32 文件系统? 因为 NTFS 是 Windows ...

  6. objectForKey与valueForKey在NSDictionary中的差异

    从 NSDictionary 取值的时候有两个方法,objectForKey: 和 valueForKey:,这两个方法具体有什么不同呢? 先从 NSDictionary 文档中来看这两个方法的定义: ...

  7. thinkphp5 下 的Nginx 伪静态

    server { listen 80; server_name all.bjed.com; root "F:\www\asdata"; location / { index ind ...

  8. js各种效果

    1.JavaScript 仿LightBox内容显示效果 2.固定高度的div,竖直方向出现滚动条,水平方向固定 http://www.jb51.net/css/109928.html <!do ...

  9. 在64位的UBUBTU 服务器 ***

    前言: 安装/重装系统,U盘启动盘不稳定,建议使用USB-CDROM启动 如果是重装系统,要记录好硬盘的信息和职能: fdisk -l lsblk blkid /etc/fstab mkfs.ext3 ...

  10. JVM内存管理之GC简介

    为何要了解GC策略与原理?        原因在上一章其实已经有所触及,就是因为在平时的工作和研究当中,不可避免的会遇到内存溢出与内存泄露的问题.如果对GC策略与原理不了解的情况下碰到了前面所说的问题 ...