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