主mxml:

<?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" creationComplete="handleCreationComplete(event)"><!-- 设置了最小高宽则可能导致页面显示不全【不设置可能导致控件重叠】 -->    
    <fx:Style source="com/sanchan/flex/css/global.css"/>
    <fx:Script source="com/sanchan/flex/acs/common.as"/>
    <fx:Script source="com/sanchan/flex/acs/test.as"/>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g.,services,value objects) here -->
        <!-- FLex中XML有两种使用方法： 1、直接使用 例如：<fx:XML> 实际访问的groceryInventory是XML Flash Player支持E4X(ECMAScript fot XML)特性，可以使像访问对象一样访问XML中数据 2、将XML转换成对象，再用对象替代XML。例如：<fx:Model> 实际访问的groceryInventory是mx.utils.ObjectProxy对象 -->
        <fx:Model id="groceryInventory" source="assets/inventory.xml"/>         
    </fx:Declarations>
    <s:states>
        <!-- 排在第一位的是默认状态 -->
        <s:State name="otherStatu"/>
        <s:State name="cartStatu"/>
        <s:State name="expanded"/>
    </s:states>
    <s:controlBarLayout>
        <s:BasicLayout/>
    </s:controlBarLayout>
    <s:controlBarContent>
        <s:Button x="10" y="0" top="5" bottom="5" width="50" label="Frist"/>
        <s:Button x="70" y="0" top="5" bottom="5" width="50" label="Two"/>
        <s:Button id="btnCheckOut" right="10" top="5" bottom="5" width="100" label="Check Out"/>
        <s:Button includeIn="otherStatu" right="120" top="5" bottom="5" label="View Cart" click="toCartStatu()"/>
        <s:Button includeIn="cartStatu" right="120" top="5" bottom="5" label="View Shop" click="toOtherStatu()"/>
    </s:controlBarContent>
    <s:HGroup id="bodyGroup" left="10" right="10" top="10" width="100%">
        <!-- width.XXX 这种形式设定在XXX状态时属性的值 -->
        <s:VGroup id="products" width="100%" height="150" visible.cartStatu="false" width.cartStatu="0" height.cartStatu="0">
            <s:Label id="prodName" text="Milk"/>
            <!-- scaleMode缩放的模式，默认是等比例缩放 -->
            <!-- source 可以使用@Embed设置编译时加载，用户不用等待图片动态加载，但是会导致生成的swf变大 -->
            <s:Image width="100" height="100" mouSEOut="toOtherStatu()" mouSEOver="toExpanded()" source="D:360极速浏览器下载口罩风风.jpg"/>
            <s:Label id="price" text="${groceryInventory.listPrice}"/>
            <s:Button id="add" label="AddToCart"/>
        </s:VGroup>
        <s:VGroup id="cart" width.cartStatu="100%" height.cartStatu="100%">
            <s:Label text="Your Cart Total: $"/>
            <!-- 每一份MXML都有一个currentState标注当前页面的状态，可以改变改值来实现改变状态 -->
            <s:Button includeIn="otherStatu" label="View Cart" click="toCartStatu()"/>
            <mx:DataGrid id="dgCart" includeIn="cartStatu" width="100%">
                <mx:columns>
                    <mx:DataGridColumn dataField="col1" headerText="Column 1"/>
                    <mx:DataGridColumn dataField="col2" headerText="Column 2"/>
                    <mx:DataGridColumn dataField="col3" headerText="Column 3"/>
                </mx:columns>
            </mx:DataGrid>
            <!--includeIn使控件在对应状态是才出现 -->
            <s:Button includeIn="cartStatu" label="Continue Shopping" click="toOtherStatu()"/>
        </s:VGroup>
    </s:HGroup>
    <s:Label right="10" bottom="10" text="(c) 2015,FlexGrocer"/><!-- 整个元素距离底部10像素，距离右侧10像素相当于Margin -->
    <s:VGroup includeIn="expanded" x="200" width="100%">
        <!-- 数据绑定使用{}实现 -->
        <s:RichText width="50%" text="{groceryInventory.description}"/>
        <s:Label text="{groceryInventory.isOrganic}"/>
        <s:Label text="{groceryInventory.isLowFat}"/>
    </s:VGroup>
</s:Application>

global.css

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global{ font-size:20px; font-style: normal; font-weight: normal; font-family:楷体; }

common.as

public function changeStatu(statuName:String):void{
    this.currentState=statuName;
}

test.as

import mx.events.FlexEvent;

public function toOtherStatu():void{
    changeStatu('otherStatu');
}

public function toCartStatu():void{
    changeStatu('cartStatu');
}

public function toExpanded():void{
    changeStatu('expanded');
}

private function handleCreationComplete(event:FlexEvent):void{
    //在Application处理creationComplete后更新文本
    groceryInventory.description="改变了";
}