ViewStack实现页面切换功能

最新推荐文章于 2019-03-19 16:02:23 发布

原创最新推荐文章于 2019-03-19 16:02:23 发布 · 5.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#button #search #application #containers #library #encoding

flex 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用Flex框架实现的视图切换示例。通过ViewStack组件和按钮控制，可以轻松地在不同的面板（如搜索面板、客户信息面板和账户信息面板）之间进行切换。每个面板都定义在一个Canvas中，并可以通过点击相应的按钮来显示。

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>
       
   </fx:Declarations>
   <mx:Panel title="ViewStack Container Example" height="95%" width="95%"
              paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">


       <mx:Text width="100%" color="blue"
               text="Use the Button controls to change panels of the ViewStack container."/>


       <mx:HBox borderStyle="solid" width="100%"
               paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">



           <mx:Button id="searchButton" label="Search Panel"
                       click="myViewStack.selectedChild=search;"/>


           <mx:Button id="cInfoButton" label="Customer Info Panel"
                       click="myViewStack.selectedChild=custInfo;"/>


           <mx:Button id="aInfoButton" label="Account Panel"
                       click="myViewStack.selectedChild=accountInfo;"/>


       </mx:HBox>


       


       <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">


           <mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%">


               <mx:Label text="Search Screen" color="#000000"/>


           </mx:Canvas>


           <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">


               <mx:Label text="Customer Info" color="#000000"/>


           </mx:Canvas>


           <mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="100%">


               <mx:Label text="Account Info" color="#000000"/>


           </mx:Canvas>


       </mx:ViewStack>


   </mx:Panel>

</s:Application>