flex 4.5从浅入深第二章布局组件运用.pdf

第二章布局组件运用 第二章布局组件运用 第第二二章章布布局局组组件件运运用用 ken/杨海旗 ken/杨海旗 kkeenn//杨杨海海旗旗 相信大家心里对布局都有不同的定义吧！，布局不单单是整洁，好看，最主要一点还是好管理，就拿我们自己 卧室来说，如果你没对你卧室进行布局，归类，那你屋里东西一多的话，你想找个东西，那就得大扫除。所以布 局重要性不仅在生活，在各个方面都是很重要。 第一节Group 容器 第一节Group 容器 第第一一节节GGrroouupp容容器器 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 我们把垂直布局标签里加入了个间隔属性