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 ...
随机推荐
- 八、Sql Server 基础培训《进度8-查询多种写法》(实际操作)
知识点: 假设学生表.班级表.年级表 学生表(student) 内码 学生姓名 班级内码 001 张三 1002 002 李四 1002 003 王五 1003 004 钱六 1001 班级表(cla ...
- CentOS7安装Go环境
下载go(我的当前目录是/data/work)$wget https://studygolang.com/dl/golang/go1.10.1.linux-amd64.tar.gz$tar -xvf ...
- Java正则表达式使用 | 叠加
public class Test { public static void main(String[] args) { String s = "ni\nhao\nma he yi\nyon ...
- gitlab-ci + k8s 之k8s (二)
k8s用自己话说,就是一种容器编排工具,部署好应用,再创建绑定应用的服务,就可以实现的服务访问了.这个理论还是得去看重点谈理论的文章,此处我们只记录本项目部署过程. 背景介绍 之前已实现gitlab- ...
- Python Solve UnicodeEncodeError 'gbk' / 'ascii' / 'utf8' codec can't encode character '\x??' in position ? 解决有关Python编码的错误
在Python中,处理中文字符一直是很令人头痛的问题,一言不合就乱码,而且引起乱码的原因也不尽相同,有时候是python本身默认的编码器设置的不对,有时候是使用的IDE的解码器不对,还有的时候是终端t ...
- js中typeof与instanceof用法
今天写JS代码,遇到动态生成多个名称相同的input复选按钮 需要判断其是否是数组,用到了if (typeof(document.MapCheckMgr.checkid)!="undefin ...
- 把Oracle由归档模式改为非归档模式
把Oracle由归档模式改为非归档模式 开始–>运行命令cmd进入命令行模式 1. 使用命令sqlplus以无日志形式打开如下: sqlplus /nolog; 2. 连接数据库dev.worl ...
- C语言函数strstr
函数原型: extern char *strstr(char *str1, const char *str2); 语法: * strstr(str1,str2) 参数: str1: 被查找目标 ...
- js运用6
---恢复内容开始--- 1. 逻辑运算 || && ! || 遇到第一个为true的数字就终止并返回,如果完全没有就返回最后一个值 && ...
- easyui textbox 输入小写自动变大写,easyui textbox 绑定oninput事件 easyui textbox 绑定propertychange事件
<input id="id" class="easyui-textbox" name="id" value="@Model. ...