flutter container image FittedBox AspectRatio
当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的更多相关文章
- flutter Container组件和Text组件
在开始之前,我们先写一个最简单的入口文件: 后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...
- Flutter Container容器组件、Text文本组件详解
import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends Stateles ...
- Flutter Container 组件、Text 组件详解
Text 组件 textAlign 文本对齐方式(center 居中,left 左对齐,right 右对齐,justfy 两端对齐) textDirection 文本方向(ltr 从左至右 ...
- Flutter——Container组件(容器组件)
名称 功能 alignment topCenter:顶部居中对齐 topLeft:顶部左对齐 topRight:顶部右对齐 center:水平垂直居中对齐 centerLeft:垂直居中水平居左对齐 ...
- Flutter 宽高比(比率)控件 AspectRatio
const AspectRatio({ Key key, @required this.aspectRatio, Widget child,}) void main() { runApp( n ...
- Flutter 布局控件完结篇
本文对Flutter的29种布局控件进行了总结分类,讲解一些布局上的优化策略,以及面对具体的布局时,如何去选择控件. 1. 系列文章 Flutter 布局详解 Flutter 布局(一)- Conta ...
- 【Flutter学习】页面布局之基础布局组件
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 全网最详细的一篇Flutter 尺寸限制类容器总结
Flutter中尺寸限制类容器组件包括ConstrainedBox.UnconstrainedBox.SizedBox.AspectRatio.FractionallySizedBox.Limited ...
- Flutter获取屏幕宽高和Widget大小
我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情,在 Flutter 中,我们可以使用如下方法来获取屏幕或者 widget 的宽高. MediaQuery 一般情况下, ...
随机推荐
- [转]Java 8新特性探究(lambda)
原文地址:http://my.oschina.net/benhaile/blog/175012 目录[-] 函数式接口 Lambda语法 方法引用 总结 函数式接口 函数式接口(functional ...
- mysql 导入 csv文件中数据,只能导入第一行
用workbench导入csv数据,只能导入数据的第一行,也就是标注每一列的列名的那一行.但问题是,每次导入完成时,系统提示已经导入了500条记录(这个文件中的确有500条记录),可是刷新数据库后打开 ...
- MySQL之——查询重复记录、删除重复记录方法大全
查找所有重复标题的记录: SELECT * FROM t_info a WHERE ((SELECT COUNT(*) FROM t_info WHERE Title = a.Title) > ...
- 「GXOI / GZOI2019」简要题解
「GXOI / GZOI2019」简要题解 LOJ#3083. 「GXOI / GZOI2019」与或和 https://loj.ac/problem/3083 题意:求一个矩阵的所有子矩阵的与和 和 ...
- JLOI2019游记
JLOI2019游记 DAY -??? 听说是12省联考,好刺激. DAY 1 看题 t1是个lydsy题我还写过博客,t2不会,t3一脸神仙. 这个t3数据好大啊,看到好几个人都用gedit打开大样 ...
- vue中特殊特性
key 预期:number | string key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes.如果不使用 key,Vue 会使用一种最大限度减少 ...
- centos vi显示中文
1. 控制台终端显示中文 修改 /etc/sysconfig/i18n 文件如下: #LANG="en_US.UTF-8"LANG="zh_CN.GB2312" ...
- 研究ecmall一些流程、结构笔记 (转)
index.phpECMall::startup() //ecmall.php object //所有类的基础类 ecmall.phpBaseApp //控制器基础类 app.base.phpECBa ...
- angular先加载页面再执行事件,使用echarts渲染页面
剧情重现: 在一个页面中有多个小模块,这几个模块是可以拖动调顺序的,并且其中有两个模块使用了echarts渲染, 调整顺序angular插件有成熟的解决方案angular-sortable,https ...
- 【备忘:待完善】nsq集群初体验
本机的一个节点及监控与管理后台 虚拟机中的一个节点 命令: [root@vm-vagrant nsq]# nsqd --lookupd-tcp-address=192.168.23.150:4160 ...