Flex 登录布局实例

<?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="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel width="376" height="244" horizontalCenter="0" verticalCenter="0" fontSize="14">
		<s:HGroup>
			<s:BorderContainer borderWeight="0">
				<s:Image horizontalCenter="0" source="assets/images/loginIcon.png"/>
			</s:BorderContainer>
			<s:Form width="261" height="192">
				<s:FormItem  label="Username: " width="250">
					<s:layout>
						<s:BasicLayout/>
					</s:layout>
					<s:TextInput id="uname" x="-111" width="136"/>
				</s:FormItem>
				<s:FormItem label="Password: "  width="249">
					<s:layout>
						<s:BasicLayout/>
					</s:layout>
					<s:TextInput id="pwd" x="-111" width="136"/>
				</s:FormItem>
				<s:CheckBox id="isSaveUnameAndPwd" width="236" label="Save  UserName  And  Password"/>
				<s:HGroup width="239" height="28" horizontalAlign="right">
					<s:Button width="72" height="26" label="Login"/>
					<s:Button width="72" height="26" label="Cancel"/>	
				</s:HGroup>
				<s:FormItem label="The username is not existed" id="errorTip" visible="false"/>
			</s:Form>
		</s:HGroup>
		
	</s:Panel>
</s:Application>

 备注：

   1、用于保证panel居中

horizontalCenter="0" verticalCenter="0"

   

   2、在panel中设置了字体大小之后，panel内部的组件无需重复设置。

fontSize="14"

   

   3、设置了basiclayout之后，组件的位置就可以拖动了

<s:layout>
	<s:BasicLayout/>
</s:layout>