FractionallySizedBox
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的更多相关文章
- Flutter 布局(四)- Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth详解
本文主要介绍Flutter布局中的Baseline.FractionallySizedBox.IntrinsicHeight.IntrinsicWidth四种控件,详细介绍了其布局行为以及使用场景,并 ...
- Flutter 容器(6) - FractionallySizedBox
FractionallySizedBox 用法与SizedBox类似,只不过FractionallySizedBox的宽高是百分比大小,widthFactor,heightFactor参数就是相对于父 ...
- Flutter FractionallySizedBox 设置维度比例 而不是固定的px
本周小部件 有时您的设计需要相对的维度. FractionallySizedBox允许您将子项的大小调整为总可用空间的一小部分. Scaffold( body: Center( child: Frac ...
- Flutter 布局控件完结篇
本文对Flutter的29种布局控件进行了总结分类,讲解一些布局上的优化策略,以及面对具体的布局时,如何去选择控件. 1. 系列文章 Flutter 布局详解 Flutter 布局(一)- Conta ...
- 【Flutter学习】页面布局之其它布局处理
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 【Flutter学习】页面布局之列表和表格处理
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 【Flutter学习】页面布局之宽高尺寸处理
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 【Flutter学习】页面布局之基础布局组件
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- flutter layout-child
一.Container 二.Padding 三.Center 四.Align 五.FittedBox 六.AspectRatio 七.ConstrainedBox 八.Baseline 九.Fract ...
随机推荐
- JS设计模式——工厂模式详解
它的领域中同其它模式的不同之处在于它并没有明确要求我们使用一个构造器.取而代之,一个工厂能提供一个创建对象的公共接口,我们可以在其中指定我们希望被创建的工厂对象的类型. 简单工厂模式:使用一个类(通常 ...
- HOOK IDT频繁蓝屏(Window 正确 HOOK IDT)
环境 win7x64 Microsoft Windows [版本 6.1.7601]也是一个朋友 HOOK IDT 测试 问我IDT为啥老是蓝屏.结果是因为swapgs问题. 如果你知道swapgs作 ...
- 如何在spring-boot web项目中启用swagger
swagger的三个项目及其作用 我们打开swagger的官网,会发现有三个swagger相关的项目,它们分别是 swagger-editor 作用是通过写代码,生成文档描述(一个json文件或其他格 ...
- python学习中的bug
1.在pycharm的terminal中的python工程目录下update pip失败,但是在cmd中为什么就可以.’
- 二、JavaScript基础(1)
1.JavaScript 基于对象和事件驱动的脚步语言,主要应用在客户端 特点:交互性(信息的动态交互).安全性(不可直接访问本地硬盘).跨平台性(只要可以解析js的浏览器 都可以执行,与平台无关) ...
- 剑指offer——python【第2题】替换空格
题目描述 请实现一个函数,将一个字符串中的每个空格替换成“%20”. 例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 理解 很容易想到用pytho ...
- css小知识 2
效果为 为什么还出现出现不同的效果? 浏览器在解析第二个p的时候,因为第二个字母见没有空格,它会认为这是一个单词没有写完,所以不会换行 列表 1.无序列表ul 第二,内部必须有子代标签<li&g ...
- C++关于运算符重载知识点
1) 除了类属关系运算符".".成员指针运算符".*".作用域运算符"::".sizeof运算符和三目运算符"?:"以外 ...
- 我了解到的新知识之—Apple Captive Portal 网页认证登陆公共Wifi
因为今天一个用户遇到选择公司WiFi后,无法弹出网页认证登陆界面的问题,随即上网搜索相关信息,因为公司内没有VPN,无法FQ,只能用bing来搜索一下相关信息了. Captive Portal听起来好 ...
- 移动前端开发和 Web 前端开发的区别
http://www.itcast.cn/news/20180125/16033584753.shtml 1,普通PC端开发与移动端开发区别. 先说背景,我大言不惭的说一下,我pc端的前端开发干了有快 ...