Question

我想在Flex 4中使用垂直选项卡。我已经开始通过在一侧放置垂直列表来实现此功能。在列表选择上，我正在更新视图堆栈的选择索引。这提供了垂直标签的功能。

我的问题是外观和感觉。如何让列表具有与水平标签栏类似的外观？这是一个覆盖皮肤的情况吗？

我找到了这篇文章：

Is there a way to make a <s:TabBar /> vertical?

确实实现了垂直标签。我的问题是我没有在标签中找到任何文字。我认为问题是这最初是为flex 2编写的。我正在使用flex 4并试图将这个组件放在一个

中

任何指针都会很棒。

由于

Answer 1

http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/

的最简单解决方案

如果你看一下ButtonBar皮肤，你会发现它默认使用一个特殊的水平布局 - ButtonBarHorizontalLayout。根据您的需求，您可能希望实现自己的垂直布局，或者只使用标准的VerticalLayout。

Answer 2

使用bug很多链接我有以下工作：

<s:layout>
    <s:HorizontalLayout horizontalAlign="left" paddingLeft="10"/>
</s:layout>
<s:ButtonBar id="btnBar" horizontalCenter="0" verticalCenter="0">
    <s:layout>
        <s:VerticalLayout gap="-1"/>
    </s:layout>
    <s:dataProvider>
        <s:ArrayList source="[Red,Orange,Yellow]"/>
    </s:dataProvider>
</s:ButtonBar>

<mx:ViewStack id="vs" width="700" height="400" left="8" y="23" paddingTop="0">
    <s:NavigatorContent>
        <s:Label text="Red"/>
    </s:NavigatorContent>
    <s:NavigatorContent>
        <s:Label text="Orance"/>
    </s:NavigatorContent>
    <s:NavigatorContent>
        <s:Label text="Yellow"/>
    </s:NavigatorContent>
</mx:ViewStack>

Answer 3

我仍然是Flex的新手，所以我想，我可能会像我一样为任何面临类似困难的人发布我的解决方案。如果有相同解决方案的更好方法，我很乐意接受建议！

经过对TabbedViewNavigator的Skinclass的大量研究后，我决定制作自己的TabbedViewNavigator / SplitView。帮助正在搜索的其他人

我创建了一个面板作为主容器，包括两个面板（mainViewContainer - 包含我正在编码的应用程序的主视图和右边的垂直TabBar，以及sideViewContainer - 用于聊天，用户列表和工具列表，应该在TabClick上打开）。我根据当前状态调整了面板的大小。

<form name="testForm">
<field property="testField" depends="mask,mask1">
        <msg  key="msg1120 name="mask"/>
        <msg key="msg1121" name="mask1" />        
        <arg key="testField"/>
        <var>
              <var-name>mask</var-name>
              <var-value>
    ^(?:[！＃＄（）＊＋－．／０-９：＝？)*$
    </var-value>
        </var>      
        <var>
              <var-name>mask1</var-name>
              <var-value>^[^ ]</var-value>
        </var>              
    </field>
</form>

对于TabBar的行为，我写了四个处理程序：

        <!-- Container -->
    <s:Panel id="mainViewContainer" width="100%" height="100%"     skinClass="skins.testPanelSkin" >
        <s:HGroup height="100%" width="100%">   

        <!-- mainPanel -->
        <s:Panel id="mainPanel"
                 height="100%"
                 left="0"
                 right="0"
                 width = "{mainViewContainer.width*1.0}"
                 width.sidePanelMaximized="{mainViewContainer.width*0.8}"
                 width.sidePanelMinimized="{mainViewContainer.width*1.0}" 
                 skinClass="skins.testPanelSkin" >

            <s:TabBar id="tabBar" rotation="90" right="0" click="onTab_clickHandler(event)"
                      height="100%" requireSelection="false">   <!--  itemRendererFunction="selectRenderer" -->         
                <s:dataProvider>
                    <s:ArrayCollection>
                                <s:tab id="chat" text="Chat" />
                                <s:tab id="userlist" text="Userlist" />
                                <s:tab id="tools" text="Tools" />
                    </s:ArrayCollection>
                </s:dataProvider>
            </s:TabBar>     
            <s:Rect width="{tabBar.height}" height="100%" right="0">
                <s:stroke>
                    <s:SolidColorStroke color="red" />
                </s:stroke>
            </s:Rect>   
            <s:Label id="stateChangeBtn"
                      width="150"
                      height="150"
                      text="{currentState}"
                      horizontalCenter="1"
                      verticalCenter="1"
                      color="red" />    
        </s:Panel>

        <!-- Container as sidepanel -->
        <s:Panel id="sidePanelContainer" 
                 height="100%" 
                 left="0"
                 right="0"
                 width="100%"
                 width.sidePanelMinimized="{0}"
                 width.sidePanelMaximized="100%">
            <s:HGroup width="100%">     
                <s:Panel left="0" right="0" id="sidebarViewStackPanel" height="100%" width="100%"
                         skinClass="skins.testPanelSkin"
                         width.sidePanelMaximized="100%"
                         width.sidePanelMinimized="{0}" >
                    <s:ViewNavigator id="sidebarViewNav"  firstView="views.chatView" width="100%" height="100%"              
                                     defaultPushTransition="{null}" defaultPopTransition="{null}" />
                </s:Panel>          
            </s:HGroup>             
        </s:Panel>  
        </s:HGroup>
    </s:Panel>

并为组件（MainView）提供以下事件：

            protected var viewDict : Dictionary = new Dictionary();

            protected function view1_creationCompleteHandler(event : FlexEvent) : void {
            // TODO Auto-generated method stub
            viewDict[0] =  views.chatView;
            viewDict[1] = views.userlistView;
            viewDict[2] = views.toolsView;          
        }

        protected function onTab_clickHandler(event : MouseEvent) : void {          
            if (event.target.hasOwnProperty("itemIndex") &&
                "sidePanelMaximized" === this.currentState &&
                tabBar.caretIndex === event.target.itemIndex)
            {
                sidebarViewNav.popView();
                this.currentState = "sidePanelMinimized";           
            } else {                    
                this.currentState="sidePanelMaximized";         
                sidebarViewNav.popView();
                sidebarViewNav.pushView(viewDict[event.target.itemIndex].valueOf());        
            }   
        }               

        protected function view1_stateChangeCompleteHandler(event:FlexEvent):void
        {
            // TODO Auto-generated method stub
            if (currentState === "sidePanelMinimized" ) {
                sidePanelContainer.visible=false;
                tabBar.selectedItem = -1;
            } else {
                sidePanelContainer.visible=true;
            }
        }

        protected function view1_currentStateChangeHandler(event:StateChangeEvent):void
        {
            // TODO Auto-generated method stub
            if (currentState == "sidePanelMaximized") {
                sidePanelContainer.visible=true;
            } else {
                sidePanelContainer.visible=false;
            } 
        }

这个解决方案可能看起来有点过载，但正如我所说，我对Flex很新。我希望这对某些人有帮助:)）

Answer 4

你试过rotation=90吗？当然，使用坐标校正 - 它将围绕左上角旋转。

Flex 4中的垂直选项卡

4 个答案: