state的切换(页面的跳转)

本文介绍了一个使用Flex实现的UI组件,该组件通过状态管理来控制显示详细信息或简介。利用MXML中的状态(State)标签,文章详细解释了如何在两种显示状态间进行切换,并展示了如何通过点击按钮来触发状态变化,同时更新UI元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    
<mx:Script>
        
<![CDATA[
            import flash.events.MouseEvent;
            internal function changeState(event:MouseEvent):void{
                if(this.currentState=="detail"){  //currentState属性代表了目前的状态,
                    this.currentState="";
                    btnLinkButton.label="了解详情";
                }else{
                    this.currentState="detail";
                    btnLinkButton.label="返回简介";
                }
            }
            
        
]]>
    
</mx:Script>
    
<mx:states>
        
<mx:State name="detail">
            
<!--  Mx:states标签中添加一对标签mx:state ,用来定义一个状态,state对象可以使用以下方法
                    SetEventHandler   设置对象某一事件的监听方法。
                    SetProperty   设置对象的属性
                    SetStyle  设置对象的样式
                    AddChild  向对象添加一个子级元素
                    RemoveChild  删除一个子级元素
                    Transition   设置状态的过渡动画效果
     
-->
            
<!-- 向对象添加一个子级元素  -->
            
<mx:AddChild relativeTo="{ControlPanel}" position="lastChild" creationPolicy="all">
                
<!-- relativeTo表示目标容器,
                    position表示新对象在容器中的位置,可选的值有before  after  firstChild  lastChild .
                        before 和after  分别表示添加到对象所在容器中,处于对象位置的前面或后面。 
                        fistChild  表示在所有子级元素的最前面
                        lastChild  表示在所有子级元素的最后

                    createPolicy可以控制对象对子级元素的显示操作,可选的值有all,auto,none,queued,默认为auto ,如果没有特殊要求,设为all就可以了。
                        all  表示总是创建对象
                        auto  表示只有需要对象时才创建
                        none  表示不创建对象,直接调用createComponentsFromDescription函数时才创建他。
                        queued   表示将对象放在等待创建的队列中,对象完成初使化再开始创建子级元素。

                
-->
                
<mx:Text width="100%">
                    
<mx:htmlText>
                        
<![CDATA[
                            美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!
                            美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!
                            美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!
                            美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!美女啊!
                        
]]>
                    
</mx:htmlText>
                
</mx:Text>
            
</mx:AddChild>
            
<!-- 设置对象的属性   -->
            
<mx:SetProperty target="{ControlPanel}" name="title" value="详细情况"></mx:SetProperty>
            
<!--  设置对象某一事件的监听方法  -->
            
<mx:SetEventHandler target="{btnLinkButton}" name="click" handlerFunction="changeState"></mx:SetEventHandler>
            
<!-- 设置对象的样式  -->
            
<mx:SetStyle target="{btnLinkButton}" name="color" value="#990000"></mx:SetStyle>
            
<!-- 删除一个子级元素  -->
            
<mx:RemoveChild target="{image}"></mx:RemoveChild>
        
</mx:State>
    
</mx:states>
    
<mx:Panel x="10" y="10" width="399" height="312" layout="absolute" id="ControlPanel" title="状态的改变">
        
<mx:Image x="10" y="10" source="img/5.jpg" width="128" height="189" id="image"/>
        
<mx:ControlBar>
            
<mx:LinkButton label="了解详情" id="btnLinkButton" click="changeState(event)"/>
        
</mx:ControlBar>
    
</mx:Panel>
    
</mx:Application>
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值