flex中HBox(VBox)组件嵌套容器中的布局设置比例探究实例

最新推荐文章于 2020-12-23 01:56:48 发布

iteye_15879

最新推荐文章于 2020-12-23 01:56:48 发布

阅读量404

点赞数

分类专栏： flex布局与皮肤文章标签： Flex XML

flex布局与皮肤专栏收录该内容

8 篇文章 0 订阅

订阅专栏



<?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/halo"
			   minWidth="1024" minHeight="768"
			   creationComplete="initApp();">

	<fx:Script>
		<![CDATA[
			private function initApp():void{
			    trace(hbox01ID.width, "===", hbox01ID.x);
				trace(hbox02ID.width, "***", hbox02ID.x);
			}

		]]>
	</fx:Script>

	<!--HBox(VBox)组件嵌套容器中的布局设置比例探究(在此以HBox组件为例)
	    HBox里的子组件按照从左往右排列；
	    设置父容器间距：horizontalGap="0" verticalGap="0"(默认的两个都不为零)，此设置为的是可以自定义的更加精确；
	    几个孩子组件的宽度和仍小于HBox的长度，则右边的空间就剩着；

	    计算每个百分比表示的子组件的长度：
	    （父容器剩余的总共的实际的长度:总余长sleng）
	    sonLeng = sleng * (子组件长(百分比表示) / 所有已百分比表示的组件的长度总和(百分比表示));
	    例如：子组件hboxID的实际长度像素为：(500 - 0) * (50% / (50% +  100%));

	-->
	<mx:HBox id="hboxID" x="200" y="100" width="500" height="300" backgroundColor="red" horizontalGap="0" verticalGap="0">
		<mx:HBox id="hbox01ID" width="55%" height="50%" backgroundColor="blue"/>

		<mx:HBox id="hbox02ID" width="50%" height="100%" backgroundColor="yellow"/>

	</mx:HBox>

</s:Application>