我想在Flex 4中使用垂直选项卡。我已经开始通过在一侧放置垂直列表来实现此功能。在列表选择上，我正在更新视图堆栈的选择索引。这提供了垂直标签的功能。
我的问题是外观和感觉。如何让列表具有与水平标签栏类似的外观？这是一个覆盖皮肤的情况吗？
我找到了这篇文章：
Is there a way to make a <s:TabBar /> vertical?
确实实现了垂直标签。我的问题是我没有在标签中找到任何文字。我认为问题是这最初是为flex 2编写的。我正在使用flex 4并试图将这个组件放在一个
中任何指针都会很棒。
由于
答案 0 :(得分：2)
http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/
的最简单解决方案如果你看一下ButtonBar皮肤，你会发现它默认使用一个特殊的水平布局 - ButtonBarHorizontalLayout。根据您的需求，您可能希望实现自己的垂直布局，或者只使用标准的VerticalLayout。
答案 1 :(得分：1)
使用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>
答案 2 :(得分：1)
经过对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很新。我希望这对某些人有帮助:)）
答案 3 :(得分：0)
你试过rotation=90吗？当然，使用坐标校正 - 它将围绕左上角旋转。