Question

如何利用Flash Builder4.0中的VBox和HBox布局

Answer 1

在新建的Flex项目下，缺省的包中新建一个Flex应用程序“Layout.mxml”，如下图所示：

　　在“Layout.mxml”中添加一个整体的容器VBox
　　<mx:VBox width="99%" height="99%" borderVisible="true" borderStyle="solid" borderColor="#FF0000"
　　paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
　　</mx:VBox>
　　如下图所示：

　　在上述步骤中的代码中，添加三个HBox
　　<mx:HBox width="100%" height="25%" borderVisible="true" borderStyle="solid" borderColor="#00FF00">

　　</mx:HBox>
　　<mx:HBox width="100%" height="50%" borderVisible="true" borderStyle="solid" borderColor="#0000FF">
　　</mx:HBox>
　　<mx:HBox width="100%" height="25%" borderVisible="true" borderStyle="solid" borderColor="#006778">

　　</mx:HBox>
　　如下图所示：

　　添加的第二个HBox中，再次添加三个VBox，并且给这三个VBox的边框设置样式
　　<mx:VBox width="25%" height="100%" borderVisible="true" borderStyle="solid" borderColor="#456745">

　　</mx:VBox>

　　<mx:VBox width="50%" height="100%" borderVisible="true" borderStyle="solid" borderColor="#ED7867">

　　</mx:VBox>

　　<mx:VBox width="25%" height="100%" borderVisible="true" borderStyle="solid" borderColor="#123298">

　　</mx:VBox>
　　代码编写完毕后，鼠标右键，依次操作“运行方式（R）--->Web应用程序”，