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 一般情况下, ...
随机推荐
- 使用LinkedBlockingQueue来实现生产者消费者的例子
工作中,经常有将文件中的数据导入数据库的表中,或者将数据库表中的记录保存到文件中.为了提高程序的处理速度,可以设置读线程和写线程,这些线程通过消息队列进行数据交互.本例就是使用了LinkedBlock ...
- 在 Visual Studio中 使用Apache Cordova 开发安卓、iOS程序(自定义图标和闪屏)
方法1 1台安装有linux的电脑,虚拟机也行,并安装imagemagick软件包.我用的是linux mint,直接在软件管理器中安装即可 把https://github.com/shamork/c ...
- HDU - 5876 :Sparse Graph (完全图的补图的最短路 -BFS&set)
In graph theory, the complement of a graph G is a graph H on the same vertices such that two distinc ...
- 解决form嵌套
自己的尝试功能实现了 但是项目中没有使用: 思路利用ajax:第一个form提交的时候触发第二个需要提交数据的ajax的请求url function checkform(type){ var issu ...
- Loj 2047 伪光滑数
Loj 2047 伪光滑数 正解较复杂,但这道题其实可以通过暴力解决. 预处理出 \(128\) 内的所有质数,把 \(n\) 内的 \(prime[i]^j\) 丢进堆中,再尝试对每个数变形,除一个 ...
- LOJ2424 NOIP2015 子串 【DP】*
LOJ2424 NOIP2015 子串 LINK 题目大意是给你两个序列,在a序列中选出k段不重叠的子串组成b序列,问方案数 首先我们不考虑相邻的两段,把所有相邻段当成一段进行计算 然后设dpi,j, ...
- BZOJ2243 SDOI2011 染色 【树链剖分】
BZOJ2243 SDOI2011 染色 Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色 ...
- 使用python处理selenium中的xpath定位元素的模糊匹配问题
# 用contains,寻找页面中style属性值包含有sp.gif这个关键字的所有div元素,其中@后面可以跟该元素任意的属性名. self.driver.find_element_by_xpath ...
- jQuery AJAX 跨域请求
跨域请求 只要 dataType : 'jsonp', jsonp:"jsoncallback", 然后返回一个json格式的就可以了 <!doctype html> ...
- wpf Tree
code using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sys ...