flex中TabBar、ButtonBar以及ViewStack

最新推荐文章于 2019-10-29 17:24:56 发布

liningzheng

最新推荐文章于 2019-10-29 17:24:56 发布

阅读量838

点赞数

文章标签： flex 图形界面

本文链接：https://blog.csdn.net/liningzheng/article/details/46649991

版权

flex中实现标签页的方法：

方法1：

<s:TabBar dataProvider="{myViewStack}" top="0" x="5"/>

<mx:ViewStack id="myViewStack" creationPolicy="all" styleName="tabViewStack"
                       width="100%" height="100%" top="22" change="costViewStack_changeHandler(event)">
           <s:NavigatorContent id="costTabel" label="费用列表" height="100%" left="10">
                
           </s:NavigatorContent>

           <s:NavigatorContent id="costReport" label="报表信息" height="100%" left="10">
               <s:BorderContainer id="viewerGroup" width="100%" height="100%" borderVisible="false">
                    <s:Label text="显示报表界面" top="35"/>
               </s:BorderContainer>
           </s:NavigatorContent>

</mx:ViewStack>

效果如下：

如果把TabBar用ButtonBar替换掉之后，效果如下

根据效果不同，可以选择适当的实现方式，如果需要实现特定的效果，则通过itemRender实现自定义效果。

ButtonBar是基于List的控件，不要被它的外表所误导。

ButtonBar和TabBar的集成结构如下：

ButtonBar ---ButtonBarBase--ListBase

TabBar --ButtonBarBase--ListBase

所以可以使用dataProvider提供数据，如下

<s:ButtonBar>
   <s:ArrayCollection>
       <fx:String>Button One</fx:String>
       <fx:String>Button Two</fx:String>
       <fx:String>Button Three</fx:String>
       <fx:String>Button Four</fx:String>
   </s:ArrayCollection>
</s:ButtonBar>

方法2：

<mx:TabNavigator id="myViewStack" creationPolicy="all" styleName="tabViewStack"
                       width="100%" height="100%" top="22" change="costViewStack_changeHandler(event)">
           <s:NavigatorContent id="costTabel" label="费用列表" height="100%" left="10">
               <s:Label text="显示表格界面" top="35"/>
           </s:NavigatorContent>

           <s:NavigatorContent id="costReport" label="报表信息" height="100%" left="10">
               <s:BorderContainer id="viewerGroup" width="100%" height="100%" borderVisible="false">
                    <s:Label text="显示报表界面" top="35"/>
               </s:BorderContainer>
           </s:NavigatorContent>
</mx:TabNavigator>

使用TabNavigator替换ViewStack，TabNavigator继承自ViewStack，但是它会自带两个选项卡，而ViewStack则需要配合TabBar或者ButtonBar来实现，效果如下：