Flex4中使用HDividedBox,VDividedBox

时间:2022-04-23
本文章向大家介绍Flex4中使用HDividedBox,VDividedBox,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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>

效果图