Flutter的基本容器
一起从0开始学习Flutter!
Flutter官方并没有对Widget进行官方分类，其实对于容器和布局类型的划分比较纠结，有些感觉不是很明确怎么去划分到哪个部分，先按容器下可以添加子控件的数量作为分类标准，添加多个子控件的为布局，对单个组件进行设置的为容器，如果以后有好的方法再进行调整。 这里分出来的容器有Padding，Align，Positioned，Container，Scaffold，Transform，ConstrainedBox，SizedBox，RotatedBox。容器比较多，来一个一个的学习他们的特点。
1. Padding
容器的内填充，刚一开始看到padding肯定会想到它的好兄弟margin，在Flutter中去除掉了margin的概念，我们只能是通过使用padding来代替margin的实现。 padding 我们需要内填充的大小，这里不是传入具体的数值，需要传入EdgeInsetsGeometry，通过它可以设置填充的位置以及大小。 如果我们只想填充某几个边，不是全部的时候，可以使用EdgeInsets.only，可以根据上下左右来设定。
const EdgeInsets.only({
this.left = 0.0,
this.top = 0.0,
this.right = 0.0,
this.bottom = 0.0,
});
如果我们要设定的是全部，则推荐使用EdgeInsets.all，可以直接设定全部边的内边距。
const EdgeInsets.all(double value)
: left = value,
top = value,
right = value,
bottom = value;
child 添加内边距的控件
2.Align
子控件相对于父控件的位置，可以回看上篇中的Stack，如果没有指定子控件的位置的话都是根据Stack中的alignment显示的，如果给子控件设定了Align则会摆脱它的束缚。 alignment 子控件位于父容器的位置，默认设置Alignment.center Alignment.topLeft 子控件位于顶部左上角 Alignment.topCenter 子控件位于顶部中间 Alignment.topRight 子控件位于顶部右边 Alignment.centerLeft 子控件位于中间的左部 Alignment.center 子控件位于中间 Alignment.centerRight 子控件位于中间的右边 Alignment.bottomLeft 子控件位于底部左侧 Alignment.bottomCenter 子控件位于底部的中间 Alignment.bottomRight 子控件位于底部的右边 child 需要指定位置的子控件
3.Positioned
子控件在Stack布局中的位置，相当于绝对定位。
left
距离屏幕左边的距离
top
距离屏幕顶部的距离
right
距离屏幕右边的距离
bottom
距离屏幕底部的距离
width
子控件的宽度
height
子控件的高度
注意： (left,right,width)(top,bottom,height)这两组属性都是只能设置其中的两个，不能三个全部设置！！
child
需要指定位置的子控件
4.Container
是不是觉得上面的各种设置会很麻烦，Container不仅包含了Align和Padding的功能还有一些更强大的功能。 alignment 可以参照Align的设置 padding 可以参照Padding的设置 color Container的背景色 Flutter内置了丰富的颜色，我们可以直接Colors里面的颜色如：Colors.black，如果有自定义颜色的要求，我们可以Color(0x000000) decoration 可以设置Container背景的渐变色，圆角和阴影颜色，和color属性之能选择一个设置。 需要传入BoxDecoration(),这个属性我们看基本控件的时候再去了解它。 constraints 设置容器的大小，如果设置了则widht和height的属性会失效 BoxConstraints.tightFor 可以只设置宽高某一个边的大小 BoxConstraints.tight 必须设置宽高的大小 transform 旋转视图通过Matrix4进行设置，常用的方法有： Matrix4.translationValues 控制控件的移动方向x :水平方向,y ：竖直方向, z：垂直于屏幕，所以看不出来效果， Matrix4.rotationZ 控制控件的旋转。Matrix4.rotationX和Matrix4.rotationY不常用，都是以侧边为轴进行旋转的操作。rotationX以顶为轴旋转，rotationY以左侧边为轴旋转 foregroundDecoration 在Container上加的遮罩颜色，设置的方式与decoration相同。 width 组件的宽 height 组件的高 margin 这里Container帮助我们实现了margin功能，传值方法同padding的方法，他的值不算在宽高里。 child 需要指定位置的子控件
5.Scaffold
终于到它了，在我们的demo中就看到了它的身影，可以看到他负责了我们整个页面的结构。先了解一下它都给我们准备好了哪些功能。 appBar 就是我们的标题栏，我们需要添加一个AppBar组件，AppBar比较大我们也放到后面看基础组件的时候去了解。最基本的添加一个AppBar我们可以设置
AppBar(title: Text(widget.title),)
body 标题栏下面的整个空间的设置我们都要通过这里进行设置，这里可以添加的我们上一篇提到的布局类。 floatingActionButton 我们在页面上通过点击然后增加数量的按钮就是通过它来显示出来的，我们也将这个控件放到后面基础组件的时候去了解。 floatingActionButtonLocation 设置悬浮按钮显示的位置 FloatingActionButtonLocation.startTop,FloatingActionButtonLocation.miniStartTop 显示在左上角 FloatingActionButtonLocation.endFloat 显示在右下角但是离底部有距离 FloatingActionButtonLocation.endDocked 显示在右下角紧挨着底部 FloatingActionButtonLocation.centerFloat 显示在底部中间但是离底部有距离 FloatingActionButtonLocation.centerDocked 显示在底部中间紧挨着底部 FloatingActionButtonLocation.endTop 显示在右上角 floatingActionButtonAnimator 悬浮按钮的显示隐藏动画，系统内置了FloatingActionButtonAnimator.scaling动画，如果想要自定义动画可以参照FloatingActionButtonAnimator.scaling创建的示例去编写自己喜欢的动画。 persistentFooterButtons 在页面的最底部添加按钮，添加底部切换按钮我们使用bottomNavigationBar,所以一般不会去使用persistentFooterButtons。 drawer和endDrawer 抽屉效果的抽屉布局,只是一个是左抽屉，一个是右抽屉。 里面想要添加的布局可以是我们上一章说的布局类，也可以是容器类。 bottomNavigationBar 这里可以添加我们常用的布局样式，但是我们一般是使用BottomNavigationBar类来设置显示的底部按钮，具体的BottomNavigationBar的介绍我们等讲到基础控件的时候再去详细了解。 bottomSheet 这里的布局会持续的呆在底部，如果软键盘被唤起则跟随软键盘一起升高，常用的场景类似微信的文字输入的底部栏。 backgroundColor 设置底部栏的背景色 resizeToAvoidBottomInset 设置键盘弹起时是否会遮挡底部的布局，false则会进行遮挡，true则不会进行遮挡。 primary 布局开始计算的位置是否包括状态栏，设置为False则会从屏幕的最顶端开始计算，默认值True是从状态栏下开始计算。 drawerDragStartBehavior 处理拖动行为的开始方式，默认是DragStartBehavior.start，替换了DragStartBehavior.down也没有看出来改变是什么。 extendBody 控制body底部的可显示范围是否在bottomNavigationBar和persistentFooterButtons之上，如果设置为True则会直接显示到屏幕的底部，而不是bottomNavigationBar和persistentFooterButtons的上面。 extendBodyBehindAppBar 更上面的类似，这个是控制是否是从屏幕顶部开始显示，而不是从AppBar下面开始显示。 drawerScrimColor 设置当Drawer打开的时候下面内容的遮挡颜色 drawerEdgeDragWidth 设置Drawer可以展开的宽度 我们平时设计APP内的常用控件基本上都帮忙已经预留了位置，我们只需要按需填坑就可以了，还是挺不错的设计。
6.Transform
来设置控件的旋转和偏移。 transform 跟Container中介绍的transform一样，参考上面的设置。 alignment 相对于坐标系原点的对齐方式，对齐方式参照Align的alignment进行设置。 origin 相对于起始位置进行的一个偏移，传入Offset(偏移的X，偏移的Y)。
7.ConstrainedBox
尺寸限定容器，我们可以通过它设定一个控件的最小最大宽度，高度。 minWidth 最小宽度，默认0 maxWidth 最大宽度，默认double.infinity，没有限制 minHeight 最小高度，默认0 maxHeight 最大高度，默认double.infinity，没有限制 child 用于设定的子控件
8.SizedBox
尺寸固定的容器，设定完之后子控件的大小就固定了 width 子控件的宽度 height 子控件的高度 child 用于固定大小的子控件
9.RotatedBox
旋转子控件，功能于Matrix4.rotationZ一样 quarterTurns 沿着顺时针方向旋转90度的次数。 child 用于旋转的子控件
基本上我们常用的容器控件就介绍完了，这里内容还是比较多的，还是需要多去练习好好理解其中的意思。
