Flutter 容器(5) - SizedBox
SizedBox: 两种用法:一是可用来设置两个widget之间的间距,二是可以用来限制子组件的大小。
import 'package:flutter/material.dart';
class AuthList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('代码测试'),
centerTitle: true,
),
body: Row(children: <Widget>[
SizedBox(
width: 150.0,
height: 150.0,
child: Container(
margin: EdgeInsets.all(20.0),
width: 200.0,
height: 200.0,
color: Colors.blue,
),
),
SizedBox(
width: 100.0,
height: 100.0,
child: Container(
margin: EdgeInsets.all(20.0),
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
),
SizedBox(
width: 100.0,
height: 100.0,
child: Container(
margin: EdgeInsets.all(20.0),
width: 200.0,
height: 200.0,
color: Colors.red,
),
)
]) ,
);
}
}
Flutter 容器(5) - SizedBox的更多相关文章
- Flutter 容器Container类和布局Layout类
1.布局和容器 [布局]是把[容器]按照不同的方式排列起来. Scaffold包含的主要部门:appBar,body,bottomNavigator 其中body可以是一个布局组件,也可以是一个容器组 ...
- Flutter 容器(7) - DecoratedBox
DecoratedBox: 装饰容器,在其子widget绘制前(或后)绘制一个装饰Decoration(如背景.边框.渐变等) import 'package:flutter/material.dar ...
- Flutter 容器(6) - FractionallySizedBox
FractionallySizedBox 用法与SizedBox类似,只不过FractionallySizedBox的宽高是百分比大小,widthFactor,heightFactor参数就是相对于父 ...
- Flutter 容器 (1) - Center
Center容器用来居中widget import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { ...
- flutter 容器
Flutter 有着丰富的布局控件库 . Flutter 中的布局整体分为 Single-child layout widget (单子布局部件) Multi-child layout widget ...
- Flutter 容器(8) - SizedOverflowBox | OverflowBox
SizedOverflowBox: 子组件在超出SizedOverflowBox指定的宽高时,不会隐藏,依然进行绘制 OverflowBox: 限制子组件的宽高. import 'package:fl ...
- Flutter 容器(4) - Container
Container 类似于HTML中的div标签 import 'package:flutter/material.dart'; class AuthList extends StatelessWid ...
- Flutter 容器(3) - AnimatedPadding
AnimatedPadding : 会产生动画效果的padding,在给定时间内缩放到指定padding import 'package:flutter/material.dart'; class A ...
- Flutter 容器 (2) - Padding
Padding: 内边距Widget,与CSS中的padding相似. import 'package:flutter/material.dart'; class AuthList extends S ...
随机推荐
- ModuleNotFoundError: No module named 'phkit.pinyin'
1 产生背景 在mac系统本地使用正常,在linux系统上phkit包缺少相应的python文件 2 解决方案 自己想出来,手动上传本地相关python代码到linux服务器 3 解决过程 首先通过项 ...
- InceptionV4
目录 1. inception v4 2. Inception-resnet-v1 & Inception-resnet-v2 2.1 Inception-resnet-v1的组成模块 2.2 ...
- 一个深拷贝方法的漏洞与一个javascript经典bug
今天做某个项目,需要函数深拷贝. 在网上随便找了个代码粘上去,结果报错了. /** * * @desc 递归法 对象深拷贝 * @param {Object} * @return {new Objec ...
- 如何看待HTTP/3
前言 HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一. ...
- Asp.Net Core 附加进程调试
第一种:VS调试 vs打开项目,F5启动调试 第二种:附加到w3wp.exe进程调试 一.安装NET Core Windows Server Hosting软件包 安装 .NET Core 托管捆绑包 ...
- 感知机算法(PLA)代码实现
目录 1. 引言 2. 载入库和数据处理 3. 感知机的原始形式 4. 感知机的对偶形式 5. 多分类情况-one vs. rest 6. 多分类情况-one vs. one 7. sklearn实现 ...
- 关于页面布局中,如何让一个div水平和垂直居中的五个方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HITCON2017-web ssrfme
<?php if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) { $http_x_headers = explode(',', $_SERVER['HTT ...
- DOM事件操作
DOM事件:对事件做出反应 当事件发生时,可以执行 JavaScript,比如:点击时 onClick="" 例:当用户点击时,会改变 <h1> 元素的内容: < ...
- 一切皆组件的Flutter,安能辨我是雄雌
从一开始接触Flutter,相信读者都会铭记一句话,那就是--一切皆组件.今天我们就来体会一下这句话的神奇魔力,我们先从实际的产品需求说起. 我们先来看一个简化的运行图: 我们要实现如上图所示的日期选 ...