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. pycharm 2018.1 激活

    pycharm 2018.1 License server 填入 https://jetlicense.nss.im/ 激活没有问题 测试时间 2018.4.18

  2. work table a year

    近10个月~ 回顾一下最近写代码和博客~  4.5.6月份刷OJ~ 7月中旬入职滴滴,几乎放弃了博客... GitHub提交统计,主要集中在准备机试,刷了九度OJ~ GitLab in didi~ 很 ...

  3. error_match问题

    当nginx的sendfile处于on的情况下,在docker的环境下修改js文件会出现error_match的问题,应该要在nginx的配置中把sendfile设为off

  4. Nestjs 接口验证

    class-validator Nestjs yarn add class-transformer class-validator main.ts import { NestFactory } fro ...

  5. Ubuntu下安装LNMP

    1.安装mysql sudo apt-get install mysql-server mysql-client 2.安装nginx sudo apt-get install nginx 安装完后重启 ...

  6. eclipse测试链接sql server2008 数据库

    注:在测试连接数据库之前必须保证SQL Server 2008是采用SQL Server身份验证方式而不是windows身份验证方式.如果在安装时选用了后者,则需要重新进行配置. 首先 使用命令行测试 ...

  7. 爬虫IP代理中的http与https

    之前使用代理IP,构造的proxies一直都是http模式 proxies={"http": "http://{}".format(ip)} 但是今天遇到的网站 ...

  8. php 检测url

    if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@ ...

  9. 调用微信定位功能 lat _ lng php方法

    {:wx_jssdk_config("false")} //最主要的这一句 没有这一句在微信浏览器里是无法调用的定位功能的.下面有这个方法说明 <script> wx. ...

  10. 文件内容统计:对任意给定的.txt文件进行内容的字符数、行数、单词数进行统计

    项目源码地址:https://gitee.com/xjtsh/projects 功能实现: wc.exe -c file.c     //返回文件 file.c 的字符数 wc.exe -w file ...