前言

Container是一个组合类容器,它本身不对应具体的RenderObject,它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器,所以只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景。

接口描述

Container({
Key key,
// 文字对齐方式
this.alignment,
// 容器内补白,属于decoration的装饰范围
this.padding,
// 背景色
Color color,
// 背景装饰
Decoration decoration,
// 前景装束
this.foregroundDecoration,
// 容器的宽度和高度
double width,
double height,
// 容器大小的限制范围
BoxConstraints constraints,
// 容器外补白,不属于decoration的装饰范围
this.margin,
// 变换
this.transform,
this.child,
})

接口说明

  1. 容器的大小可以通过width、height属性来指定,也可以通过constraints来指定;如果它们同时存在时,width、height优先。实际上Container内部会根据width、height来生成一个constraints。
  2. color和decoration是互斥的,如果同时设置它们则会报错!实际上,当指定color时,Container内会自动创建一个decoration。

代码示例

// Container容器

// Container是一个组合类容器,它本身不对应具体的RenderObject,它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器,
// 所以只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景。 import 'package:flutter/material.dart'; class ContainerTest extends StatelessWidget { @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Container容器'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//
Container(
// 容器外填充
margin: EdgeInsets.only(top: 50.0, left: 120.0),
// 卡片大小
constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0),
// 背景修饰
decoration: BoxDecoration(
// 背景径向渐变
gradient: RadialGradient(
colors: [Colors.red, Colors.orange],
center: Alignment.topLeft,
radius: .98,
),
// 卡片阴影
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0
)
]
),
// 卡片倾斜变换
transform: Matrix4.rotationZ(.2),
alignment: Alignment.center,
child: Text('Hello', style: TextStyle(color: Colors.white, fontSize: 40.0),), ) ],
),
);
}
}

总结

可以发现,直观的感觉就是margin的留白是在容器外部,而padding的留白是在容器内部,需要记住这个重要差异。事实上,Container内margin和padding都是通过Padding 组件来实现的。

通过以下代码对比:

Container(
margin: EdgeInsets.all(20.0), //容器外补白
color: Colors.orange,
child: Text("Hello world!"),
),
Container(
padding: EdgeInsets.all(20.0), //容器内补白
color: Colors.orange,
child: Text("Hello world!"),
),

等价于

Padding(
padding: EdgeInsets.all(20.0),
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.orange),
child: Text("Hello world!"),
),
),
DecoratedBox(
decoration: BoxDecoration(color: Colors.orange),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("Hello world!"),
),
),

【Flutter】容器类组件之Container容器的更多相关文章

  1. 【Flutter】容器类组件之装饰容器

    前言 DecoratedBox可以在其子组件绘制前后绘制一些装饰,例如背景,边框,渐变等. 接口描述 const DecoratedBox({ Key key, // 代表要绘制的装饰 @requir ...

  2. Flutter Container容器组件、Text文本组件详解

    import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends Stateles ...

  3. Flutter常用组件(Widget)解析-Container

    一个组件它往往包含了一些常见的painting, positioning和sizing这样的小部件. Container相当于我们常用的div,在Flutter中用的非常多,现在来看看Containe ...

  4. 【Flutter】容器类组件之Scaffold、TabBar、底部导航

    前言 一个完整的路由页可能会包含导航栏.抽屉菜单(Drawer)以及底部Tab导航菜单等.Flutter Material组件库提供了一些现成的组件来减少开发任务.Scaffold是一个路由页的骨架, ...

  5. Flutter 基础组件:进度指示器

    前言 Material 组件库中提供了两种进度指示器:LinearProgressIndicator和CircularProgressIndicator,它们都可以同时用于精确的进度指示和模糊的进度指 ...

  6. Flutter 父子组件传值

    Flutter 父子组件传值 一父传子: 父中: void onButtonChange(val1,val2,val3){ print('============================子向父 ...

  7. flutter 基础组件

    TextWidget class TextWidget extends StatelessWidget { final TextStyle _textStyle = TextStyle( fontSi ...

  8. Flutter InkWell - Flutter每周一组件

    Flutter Inkwell使用详解 该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://gi ...

  9. 关于Container容器以及IoC注入机制的认识

    container 容器的概念: 1 container 是一个Java 所编写的程序,用于对象之间之间管理对象关系. 主要的java EE 容器如下: Java容器类包含List.ArrayList ...

随机推荐

  1. Python不同包之间调用注意事项

    1.不同包之间调用,因为在不同文件夹下,引用的时候加上包名就可以了.运行时,在eclipse直接运行没有问题.但是在,命令行运行时出现找不到模块的错误.原因是,Python只搜索当前目录和内置模块以及 ...

  2. Element-ui 实现table的合计功能

    Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,其功能较为完善,根据其文档与demo学习,非常容易上手,但是我在使用其tabel组件时,发现我的功能 需求并不 ...

  3. 应用案例——高并发 WEB 服务器队列的应用

    在高并发 HTTP 反向代理服务器 Nginx 中,存在着一个跟性能息息相关的模块 - 文件缓存. 经常访问到的文件会被 nginx 从磁盘缓存到内存,这样可以极大的提高 Nginx 的并发能力,不过 ...

  4. STL——容器(Map & multimap)的删除

    Map & multimap 的删除 map.clear();           //删除所有元素 map.erase(pos);      //删除pos迭代器所指的元素,返回下一个元素的 ...

  5. sqli-labs less8-10(布尔盲注时间盲注)

    less-8 布尔盲注 首先利用?id=1' and 1=1 --+和?id=1' and 1=2 --+确定id的类型为单引号''包裹.然后进行盲注. 盲注思路: 破解当前数据库名: and len ...

  6. zstd c++ string 压缩&解压

    zstd 简介 维基百科定义: Zstandard(或Zstd)是由Facebook的Yann Collet开发的一个无损数据压缩算法.该名称也指其C语言的参考实现.第1版的实现于2016年8月31日 ...

  7. el-collapse header修改

    先看一下修改后的效果 修改前el-collapse效果 对比一下 原版el-collapse的icon在右边,而我们UI设计是在最左边,而且右边还要加上此el-collapse-item的长度. 实现 ...

  8. virtualbox sharefolder mount fail

    ubuntu 14.04.1 LTS 64bit 安装完GuestAdditions后,在终端输入 sudo mount -t vboxsf sharename /mnt/share 提示错误:mou ...

  9. 多任务-python实现-协程(2.1.11)

    多任务-python实现-协程(2.1.11) 23/100 发布文章 qq_26624329 @ 目录 1.概念 2.迭代器 1.概念 协程与子例程一样,协程(coroutine)也是一种程序组件. ...

  10. php代码审计整理

    目录 变量覆盖 1x01.extract 变量覆盖 定义和用法 语法 漏洞产生:使用了默认设置 攻击方法:制造变量名冲突,对于需要相等的值可以同时置空 修复:设定一个冲突时的处理规则 例题: 1x02 ...