如需转载，请注明出处：Flutter学习笔记（10）--容器组件、图片组件
上一篇Flutter学习笔记（9）--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件"，在Flutter中，所有的元素皆由组件组成，比如说我们常用的文本、图片、按钮、动画等等，接下来说一下在Flutter中最常用到的几类组件。
容器组件
容器组件（Container）可以理解为在Android中的RelativeLayout或LinearLayout等，在其中你可以放置你想布局的元素控件，从而形成最终你想要的页面布局。当然Flutter中的容器组件作为一个"容器"，肯定会有一些给我们提供一些属性来约束我们容器内的组件，下面介绍一下容器组件（Container）的一些常用属性及描述：
属性名 类型 说明key Key Container唯一标识符，用于查找更新
alignment AlignmentGeometry 控制child的对其方式，如果Container或者Container父节点尺寸大于Child的尺寸，这个属性设置会生效，有很多种对齐方式
padding EdgeInsetsGeometry Decoration内部的空白区域，如果有child的话，child位于padding内部
color Color 用来设置Container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果
decoration Decoration 绘制在child后面的装饰，设置了Decoration的话，就不能设置color属性，否则会报错，此时应该在Decoration中进行颜色的设置
foregroundDecoration Decoration 绘制在child前面的装饰
width double Container的宽度，设置为double.infinity可以强制在宽度上撑满
height double Container的高度，设置为double.infinity可以强制在高度上撑满
constraints BoxConstraints 添加到child上额外的约束条件
margin EdgeInsetsGeometry 围绕在Decoration和child之外的空白区域，不属于内容区域
transform Matrix4 设置Container的变换矩阵，类型为Matrix4
child Widget Container中的内容Widget
注：padding和margin的区别在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。
写一个简单的例子，体验一下容器组件Container，主要是加了一个边框及底色，示例代码如下：
import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( title: '容器组件demo', home: Scaffold( body: Center( child: Container( width: 200, height: 200, //添加边框装饰效果 decoration: BoxDecoration( color: Colors.blue, border: new Border.all( width: 10, //边框粗细 color: Colors.amberAccent //边框颜色 ), borderRadius: const BorderRadius.all(const Radius.circular(5)) //边框圆角 ), child: Text( 'Flutter Container Demo', textAlign: TextAlign.center, style: TextStyle(fontSize: 20), ), ), ), ), ); } }