import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(home: new MyApp()));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
color: Colors.blue,
height: 150.0,
width: 150.0,
// padding: const EdgeInsets.all(10.0),
child: new FractionallySizedBox(
alignment: Alignment.topLeft,
widthFactor: 0.5,
heightFactor: 0.5,
child: new Container(
color: Colors.red,
),
),
);
}
}

  

当需要在一个区域里面取百分比尺寸的时候,可以使用这个,比方说,高度40%宽度70%的区域。当然,AspectRatio也可以达到近似的效果。

FractionallySizedBox的更多相关文章

  1. Flutter 布局(四)- Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth详解

    本文主要介绍Flutter布局中的Baseline.FractionallySizedBox.IntrinsicHeight.IntrinsicWidth四种控件,详细介绍了其布局行为以及使用场景,并 ...

  2. Flutter 容器(6) - FractionallySizedBox

    FractionallySizedBox 用法与SizedBox类似,只不过FractionallySizedBox的宽高是百分比大小,widthFactor,heightFactor参数就是相对于父 ...

  3. Flutter FractionallySizedBox 设置维度比例 而不是固定的px

    本周小部件 有时您的设计需要相对的维度. FractionallySizedBox允许您将子项的大小调整为总可用空间的一小部分. Scaffold( body: Center( child: Frac ...

  4. Flutter 布局控件完结篇

    本文对Flutter的29种布局控件进行了总结分类,讲解一些布局上的优化策略,以及面对具体的布局时,如何去选择控件. 1. 系列文章 Flutter 布局详解 Flutter 布局(一)- Conta ...

  5. 【Flutter学习】页面布局之其它布局处理

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  6. 【Flutter学习】页面布局之列表和表格处理

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  7. 【Flutter学习】页面布局之宽高尺寸处理

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  8. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  9. flutter layout-child

    一.Container 二.Padding 三.Center 四.Align 五.FittedBox 六.AspectRatio 七.ConstrainedBox 八.Baseline 九.Fract ...

随机推荐

  1. 深度解剖session运行原理

    已经大半年没有更新博客了,一方面有比博客更重要的事情要做,另外一方面也没有时间来整理知识,所以希望在接下来的日子里面能够多多的写博客来与大家交流 什么是session session的官方定义是:Se ...

  2. Redis 主从配置(Windows版)

    安装从库 1.复制一份 Redis 文件,当做从库. 2.修改从库文件中 redis.windows.conf 的端口号. 3.安装服务,需要重新设置名称.然后去服务中,开启“redis6380”(此 ...

  3. 用dx生成dex时遇到class name does not match path

    前言 用dx生成dex时遇到class name (Hello) does not match path这个问题还弄了挺久,这里就简单的记录一下. 步骤 首先是dx工具是在Android的SDK里面的 ...

  4. socket.io 中文文档

    Socket.io是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用.它会自动根据浏览器从WebSocket.AJAX长轮 ...

  5. 31、cookie小test

    请尽量使用JQuery进行代码编写,需求如下: 1.  页面初始化样式如图 2. 顶部input框中输入内容,按下回车enter键后,“正在进行” 列表中加入该条内容.   3. 顶部input框中输 ...

  6. MySQL数据库导出

    因为业务需要,把MySQL查询的数据导出成csv文件,操作在Navicat中完成. 首选用SELECT语句查询数据,然后Navicat的导出,然后选csv,选路径,再加上首栏就可以了

  7. Gym 102056I - Misunderstood … Missing - [DP][The 2018 ICPC Asia-East Continent Final Problem I]

    题目链接:https://codeforces.com/gym/102056/problem/I Warm sunshine, cool wind and a fine day, while the ...

  8. Python解析Linux命令行

    写了个python脚本在linux需要传入参数使用,python参数传入有几个方法, 先用了Python中命令行参数的最传统的方法sys.argv linux cmd ~& python ma ...

  9. linux终端提示符显示bash-4.2#

    原因是root在/root下面的几个配置文件丢失,丢失文件如下: 1..bash_profile 2..bashrc 以上这些文件是每个用户都必备的文件. 使用以下命令从主默认文件重新拷贝一份配置信息 ...

  10. [redis] <<The little Redis book>>的读书笔记

    <<The Little Redis Book>> 请右键点击在新窗口打开,可按原始大小查看.