state 切換resize問題

0 0

state 切換resize問題5

最近我在解決UI的問題，我把問題簡化後的程序代碼如下

簡單說我在切換State時順便做resize動作
(複製手法先點Change view button,再點Change Size button,發現不一樣width後，再點兩次Change view button)

點兩次以上"change view" button，又會可以

問題到底出在哪裡？請問我觀念哪裡需要加強?

Flex SDK: 3.5
謝謝解答感激不盡

主要的application page

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:component="com.component.*" layout="absolute">
    
    <mx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;
            import mx.controls.Alert;
            
            private var _varWidth:int = 300;
            
            private function changeState():void{
                if(currentState == "viewsState"){
                    currentState = "";
                }else{
                    currentState = "viewsState";
                }        
            }
            
            private function changeSize():void{
                _varWidth = 500;
                dispatchEvent(new Event("widthChanged"));
            }
            
            [Bindable("widthChanged")]
            public function get varWidth():int
            {
                return _varWidth;
            }
            
        ]]>
    </mx:Script>
    <mx:Button  width="100" label="Change View" x="20" y="20" click="changeState()"/>
    <mx:Button  width="100" label="Change Size" x="140" y="20" click="changeSize()"/>
    <mx:HBox width="100%" height="100%" id="hbox1" x="24" y="52">        
        <component:componCanvas id="com1" width="100%" height="100%" backgroundColor="#29F73C">
        </component:componCanvas>
    </mx:HBox>
    
    <mx:states>
        <mx:State name="viewsState">
            <mx:SetProperty target="{com1}" name="width" value="{varWidth}"/>
            <mx:AddChild relativeTo="{hbox1}">
                <mx:VRule height="100%"/>
            </mx:AddChild>
            <mx:AddChild relativeTo="{hbox1}" position="lastChild">
                <component:componCanvas width="{varWidth}" height="100%" backgroundColor="#FED90B">
                </component:componCanvas>
            </mx:AddChild>
        </mx:State>
    </mx:states>
</mx:Application>

Component code

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">    
        <mx:Label x="0" y="0" text="this.width="/>
        <mx:Label x="60" y="0" text="{this.width}"/>        
</mx:Canvas>