Flex 4 中的垂直选项卡

Question

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

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

我找到了这篇文章：

有没有办法制作Vertical?

确实实现了垂直制表符。我的问题是我在选项卡中没有收到任何文本。我认为问题在于，这最初是为 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 还很陌生，所以我想，我可以为任何面临类似困难的人发布我的解决方案，就像我一样。如果相同的解决方案有更好的方法，我很乐意接受建议！

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

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

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

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

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

并为组件 (MainView) 提供了以下事件：

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

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

Answer 4

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