上面是效果图。
下面是代码。
<?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>