mxml布局

 

上面是效果图。

下面是代码。

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				xmlns:mysf="components.tabs1.*"
				width="100%"
				height="100%"
				layout="absolute"
				backgroundColor="white"
				backgroundAlpha="0.5">
	<mx:Script>
		<![CDATA[
			[Embed(source="asset/right.png")]
			[Bindable]
			private var logo1:Class;

			[Embed(source="asset/left.png")]
			[Bindable]
			private var logo2:Class;
		]]>
	</mx:Script>
	<mx:VBox width="100%"
			 height="100%">

		<mx:Label text="123"
				  width="100%"
				  height="10%">
		</mx:Label>
		<mx:HBox width="100%"
				 height="80%"
				 backgroundColor="green">
			<mx:LinkBar dataProvider="{detailview}"
						width="1%"
						height="100%"
						direction="vertical">
			</mx:LinkBar>
			<mx:ViewStack id="detailview"
						  resizeToContent="true"
						  width="100%"
						  height="100%">
				<mysf:TabFun1 id="tabfun1"
							  label="fun1"
							  icon="{logo1}"
							  width="100%"
							  height="100%"/>
				<mysf:TabFun2 id="tabfun2"
							  label="fun2"
							  icon="{logo2}"
							  width="100%"
							  height="100%"/>
			</mx:ViewStack>
		</mx:HBox>
		<mx:Label text="456"
				  width="100%"
				  height="10%">
		</mx:Label>
	</mx:VBox>
</mx:Application>

 

 

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<!--Box的子类 ControlBar, DividedBox, Grid, HBox, NavBar, VBox

		 direction指定布局方式是垂直还是水平 默认（veriacal 垂直的），horizontal是水平的

		 VBox (vertical box) and HBox (horizontal box)

	-->
	<!--DividedBox同Box用法差不多，只不过多加了分割符号-->
	<mx:DividedBox visible="false">

	</mx:DividedBox>
	<mx:Box direction="vertical"
			borderStyle="solid"
			paddingTop="10"
			paddingBottom="10"
			paddingLeft="10"
			paddingRight="10"
			y="10">

		<mx:Button id="fname"
				   label="Button 1"/>
		<mx:Button id="lname"
				   label="Button 2"/>
		<mx:Button id="addr1"
				   label="Button 3"/>
		<mx:ComboBox id="state">
			<mx:ArrayCollection>
				<mx:String>ComboBox 1</mx:String>
			</mx:ArrayCollection>
		</mx:ComboBox>
	</mx:Box>
	<!--VBox即 veriacal Box 垂直的Box-->
	<!--VDividedBox(veriacal divided box) 同vbox差不多-->
	<mx:VDividedBox visible="false">

	</mx:VDividedBox>

	<mx:VBox borderStyle="solid"
			 paddingTop="10"
			 paddingBottom="10"
			 paddingLeft="10"
			 paddingRight="10"
			 x="306"
			 y="10">

		<mx:Button id="fname1"
				   label="Button 1"/>
		<mx:Button id="lname1"
				   label="Button 2"/>
		<mx:Button id="addr11"
				   label="Button 3"/>
		<mx:ComboBox id="state1">
			<mx:ArrayCollection>
				<mx:String>ComboBox 1</mx:String>
			</mx:ArrayCollection>
		</mx:ComboBox>
	</mx:VBox>
	<!--Hbox即 horizontal box 水平Box-->

	<!--HDividedBox 跟Hbox差不多  Divided（分开的） horizontal divided box-->
	<mx:HDividedBox visible="false">

	</mx:HDividedBox>
	<mx:HBox borderStyle="solid"
			 paddingTop="10"
			 paddingBottom="10"
			 paddingLeft="10"
			 paddingRight="10"
			 x="57"
			 y="233">

		<mx:Button id="fnam2"
				   label="Button 1"/>
		<mx:Button id="lname2"
				   label="Button 2"/>
		<mx:Button id="addr12"
				   label="Button 3"/>
		<mx:ComboBox id="state2">
			<mx:ArrayCollection>
				<mx:String>ComboBox 1</mx:String>
			</mx:ArrayCollection>
		</mx:ComboBox>

	</mx:HBox>

	<!--同Box用法差不多，只不过多加了分割符号-->
	<mx:DividedBox visible="false">

	</mx:DividedBox>

</mx:VBox>

 

 

<?xml version="1.0"?>
<!-- fonts/DeviceFont.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Style>
     .myClass {
        fontFamily: Arial, Helvetica, "_sans";
        color: Red;
        fontSize: 12;
        fontWeight: bold;
     }
     
     Panel {
        paddingLeft: 10;
        paddingTop: 10;
        paddingBottom: 10;
        paddingRight: 10;
     }
  </mx:Style>

	<mx:Panel title="myClass Class Selector with Device Font">
		<mx:VBox styleName="myClass">
			<mx:Button label="Click Me"/>
			<mx:Label text="This is a label."/>
			<mx:TextArea width="200">
				<mx:text>
            The text in the TextArea control uses the myClass class selector.
            </mx:text>
			</mx:TextArea>
		</mx:VBox>
	</mx:Panel>
</mx:VBox>