flex的Canvas可以和HTML的DIV一樣做塊狀的網格佈局

用到的MX標籤：constraintColumns、ConstraintColumn、constraintRows、ConstraintRow

 

給大家說說前提情況：在做MXML佈局時，要嵌套很多層級，這裏面有很多問題：

1、嵌套太多層級會影響效率！

2、嵌套太多層級，代碼的可讀性、可維護性差！

3、嵌套太多層級是因爲Canvas、Vbox、Hbox功能單一，不能滿足需要，而不是必須要這樣做。

 

好吧，來看一個MXML代碼示例：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"> <mx:constraintColumns> <mx:ConstraintColumn id="column1" width="250"/> <mx:ConstraintColumn id="column2" width="100%"/> </mx:constraintColumns> <mx:constraintRows> <mx:ConstraintRow id="row1" height="25"/> <mx:ConstraintRow id="row2" height="25"/> <mx:ConstraintRow id="row3" height="100%"/> <mx:ConstraintRow id="row4" height="35"/> </mx:constraintRows> <mx:Button id="topMenuCvs" label="topMenuCvs" width="100%" top="row1:0" bottom="row1:0"/> <mx:Button id="topButtonCvs" label="topButtonCvs" width="100%" top="row2:0" bottom="row2:0"/> <mx:Button id="leftNavCvs" label="leftNavCvs" height="100%" top="row3:0" bottom="row3:0" left="column1:0" right="column1:0"/> <mx:Button id="leftMainCvs" label="leftMainCvs" height="100%" top="row3:0" bottom="row3:0" left="column2:0" right="column2:0"/> <mx:Button id="footCvs" label="footCvs" width="100%" top="row4:0" bottom="row4:0"/> </mx:Application>

 

 效果圖：