Flex4中使用HDividedBox，VDividedBox

菩提树下的杨过

发布于 2018-01-22 15:33:56

5910

发布于 2018-01-22 15:33:56

flex4中推荐使用spark组件来布局，所以在工具箱里把HDividedBox，VDividedBox这二个非常有用的东东给隐藏掉了，只能手动在source视图下手动写标签，如下:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="300">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";		
		global{font-size:18px;font-family:"微软雅黑"}
	</fx:Style>
	<s:Group right="20" left="20" top="20" bottom="20">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<mx:HDividedBox width="100%" height="50%">
			<s:TextArea text="左边的文本框" height="100%" width="50%" contentBackgroundColor="#F3EEEE"/>
			<s:TextArea text="右边的文本框" height="100%" width="50%" chromeColor="#C3EBB6" contentBackgroundColor="#F3EEEE"/>		
		</mx:HDividedBox>
		
		<mx:VDividedBox width="100%" height="50%">
			<s:TextArea text="上面的文本框" width="100%" height="50%" chromeColor="#F0E676" contentBackgroundColor="#F0E676"/>
			<s:TextArea text="下面的文本框" width="100%" height="50%" contentBackgroundColor="#F0E676"/>
		</mx:VDividedBox>
	</s:Group>	
</s:Application>

效果图