布局组件运用
第二章布局组件运用
第二章
杨海旗
ken/
ken/杨海旗相信大家心里对布局都有不同的定义吧！，布局不单单是整洁，好看，最主要一点还是好管理，就拿我们自己卧室来说，如果你没对你卧室进行布局，归类，那你屋里东西一多的话，你想找个东西，那就得大扫除。所以布局重要性不仅在生活，在各个方面都是很重要。
第一节Group容器
2.1.1绝对布局
Group只是一个容器，可以把它想象为盒子，可以用来装首饰。可以把它想象为箱子，可以用来放衣服。
等等。。他们都是属于容器呢，只有是一个物件他只要有空间，那他就属于容器。说了在多不如来实践演习来的重要。
继续我们在舞台拉入一个Group：--->
拖入到舞台后，生成的代码可以看下：
<s:Group x="180"y="159"width="200"height="200">
</s:Group>
Group组件默认的宽和高是200，200，大家可以Group里放入几个组件，看看效果：
<s:Group x="180"y="159"width="200"height="200">
<s:Button label="垃圾"/>
<s:Button label="了色"/>
</s:Group>
看下运行后的画面:
为什么两个按钮只显示一个按钮，明显的折叠了，因为Group默认的布局
方式是绝对布局，神马是绝对布局就是根据x,y进行布局，如果组件里没有
用到x,y属性话，那系统默认的就是0,0，所以第二个组件会遮挡住第一个
组件是很正常的事情，这种布局是最自由式的布局。
优点：
坚定的意志：特听话你把它放到那，哎它还就在那里，敌不动我不动，敌若动我也不动。不这样此优点算不算也是缺点呢。
缺点：
乱：如果容器里组件少话，还好管理，如果多话根本就是一团麻，这个组件是干嘛的，这个组件怎么是跑到这里，如果要换下布局无疑是个大手术啊。
覆盖：如果组件坐标很相近话，那就会被覆盖住。
所以一般还是减少绝对布局，因为他不容易维护，修改。
2.1.2常用布局
我们每个布局组件都拥有布局属性layout通过此属性可以用来控制此容器用以那种布局：
<s:Group x="180"y="159"width="200"height="200"layout="{new VerticalLayout()}"> <s:Button label="垃圾"/>
<s:Button label="了色"/>
</s:Group>
在这里VerticalLayout()垂直布局类，如果在layout里设置为VerticalLayout话那无疑就是把布局该为垂直布局，如图2。
不过这种写法不太灵活我们建立还是用标签的，详情如下：
<s:Group x="180"y="159"width="200"height="200">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Button label="垃圾"/>
<s:Button label="了色"/>
</s:Group>
出来的效果跟上面效果是一样这样写容易更好的布局，我们来给大家演示下。
<s:layout>
<s:VerticalLayout gap="10"/>
</s:layout>
我们把垂直布局标签里加入了个间隔属性也就是说组件与组件之间的缝隙是10像素，效果请见图3，大家可以和图2进行比较比较。
大家可以从中看到是不是中间细微的差距，如果视力不太好的童鞋们，请带上望眼镜查看，咳！错了是放大镜。这样做的好处是神马？就是不管界面放大还是变小，他和上个组件一直会保持10个像素的间距。对了这个是垂直布局就算你不设置间距，默认的间距也是6个像素，垂直布局也就是说他会把一排组件进行垂直的分割开来，可以使用gap来更改彼此的间隙，就像我们军训，或者上体育课时候大家可以回想下就更能理解好神马是垂直布局。当然还有水平布局，跟这个类似，只是方向不同罢了，下面几节我们会专门介绍。
2.1.3绝对居中
哈哈FLEX这东西！你们会在后面会越来越喜欢它，不因为别的就因为很布局真的很方便。想让一个组件居中，那简直跟玩似的。
接下来我们把一个组件拉入到场景中：如图4
然后请看属性面板下面的约束面板：如图5
我们首先对他水平居中，我们看下图5，既然是水平居中话那我们就看水平线上3个框框，第一个不用问就知道是水平左，第三个水平右，第二个肯定是水平中了。在我们在往下看垂直布局也是3个框框不用说第二个垂直中，也就是垂直居中，我们来设置点击刚才说的2个框框，详情见图6：
这个-54,-123，是神马意思？就是垂直居中减去54个像素，水平居中减在去123个像素，就是目前我们组件所在的位置，就是我们把组件拉入到舞台时候所在的位置，所以这样位置上根本没有变化，这时候我们需要把它们值都设置为0，大家在场景中都会感觉到组件位置发生变化，这样就可以居中了。大家看下生成的代码：
<s:Group width="200"height="200"horizontalCenter="0"verticalCenter="0">
</s:Group>
学习编程的为什么说会英语的会学的快点，因为编程的很多名词都是用英语命名的，就拿上面2个新属性，会英语的一眼看过去就知道一个是垂直居中（horizontalCenter）水平居中（verticalCenter）哪像我们英语不好还得看帮助才知道奥原来是居中的意思啊，不多说直接运行看结果。
大家运行看下，如果运行后大家看到网页一片白色这说明没错，因为Group就单单只是一个容器，连外观都省了！之所以看不到就是因为里面没内容，我们来把它填充下，请往下看：
<s:Group width="200"height="200"horizontalCenter="0"verticalCenter="0"> <!--建立个矩形填充，上下左右都为0的话那就是整个容器都进行了填充-->
<s:Rect left="0"bottom="0"right="0"top="0">
<!--填充接口-->
<s:fill>
<!--线性渐变填充，当然线性渐变可是继承了填充接口才可以进行填充-->
<s:LinearGradient>
<!--在这里你想添加多少个颜色就多个GradientEntry标签就OK-->
<s:GradientEntry color="0xfc5900"/>
<s:GradientEntry color="0x5f1e01"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:Group>
我们看下效果：图7
图7
是不是一目了然，它果然居中了，在这里大家不喜欢水平线性填充，想要垂直线性填充大家可以设置填充的角度：<s:LinearGradient rotation="90">
</s:LinearGradient>
只需要在线性填充标签里加入上填充角度为90，90也就是垂直的所以就形成了垂直布局我们在看下画面：图8
