apache-flex - Flex 4 中的垂直选项卡

Question

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

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

我找到了这篇文章：

有没有办法使 <s:TabBar /> 垂直？

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

任何指针都会很棒。

谢谢

Answer 1

http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/上最简单的解决方案

如果您查看 ButtonBar 外观，您会发现默认情况下它使用特殊的水平布局 - ButtonBarHorizo​​ntalLayout。根据您的需求，您可能想要实现自己的垂直布局，或者只使用标准的 VerticalLayout。

Answer 2

使用错误很多的链接我有以下工作：

<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 还是很陌生，所以我想，我可能会像我一样为面临类似困难的任何人发布我的解决方案。如果相同的解决方案有更好的方法，我很乐意接受建议！

After a lot of research about the Skinclass from TabbedViewNavigator, I decided to make my own TabbedViewNavigator/SplitView. To help others, who are searching

I created one panel as main container including two panels (mainViewContainer - consisting of the main view for the application I am coding and a vertical TabBar on the right, and sideViewContainer - for a chat, an userlist and a toolslist, which should open on TabClick). I resized the panels depending on the current State.

        <!-- 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>

For the behaviour of the TabBar, i wrote four handlers:

            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;
            } 
        }

And gave the component (MainView) the following events:

    creationComplete="view1_creationCompleteHandler(event)"
    currentStateChange="view1_currentStateChangeHandler(event)"
    stateChangeComplete="view1_stateChangeCompleteHandler(event)"

This solution might seem a bit overloaded, but as I said, I'm very new to Flex. I hope this is helpfull for some people :)

Answer 4

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