如何在Flex中实现这个伪TabNavigation UI？

enter image description here 如何在Flex中实现这个伪TabNavigation UI？

我想在flex中实现上面的导航UI。基本上我想要一个带两个（或更多）大按钮的酒吧（参见顶部图片，按钮一和二）。当用户点击按钮1时，一组新按钮（特定于模式1）出现在按钮条的下部，并且可以选择（见左下图）。如果你点击按钮二，也会发生同样的情况（见右下图）。基本上，按钮一和二选择他们自己的酒吧与按钮，可用于做的东西。

注意：这不是一个悬浮菜单，即下层按钮是可见的，直到用户选择另一个更高级别的按钮或单击栏的背景。

我想过使用SparkBarBar或ButtonBar容器，但我不确定这是最好的方法。

感谢您的任何建议或指向例子！

来源

2011-03-23 fred august

由于您已将此标记为flex 3和flex 4，因此我建议您使用此Flex 4组件。使用一组tab bars以及您的自定义组件的皮肤状态。从概念上讲是这样的：

<s:TabBar id="mainTabBar" change="onChange(event)"/> 
<s:TabBar id="firstSubBar" includeIn="firstSelected" /> 
<s:TabBar id="secondSubBar" includeIn="secondSelected" /> 
<s:TabBar id="thirdSubBar" includeIn="thirdSelected" />

有一个变化的方法是这样的：

protected function changeSelection(event:IndexChangeEvent): void { 
    invalidateSkinState() 
}

而在你getCurrentSkinState（）方法，这样做：

override protected getCurrentSkinState():void{ 
    if(mainTabBar.selectedIndex == 1){ 
    return "firstSelected"; 
} else if(mainTabBar.selectedIndex == 2){ 
    return "secondSelected"; 
} // etc. etc// 

return super.getCurrentSkinState(); 
}

没有原因你不能做类似的W/MX TabBar。

这有帮助吗？

来源

2011-03-23 00:25:18 JeffryHouser

它确实，但我不知道我完全得到它。更具体地说，具有多个依赖于状态的条对我来说是完全有意义的。不知道为什么你需要调整getCurrentSkinState函数 - 可以在changeSelection中切换状态吗？无论如何，感谢您的出色帮助... – 2011-03-23 01:00:58

@Fred August getCurrentSkinState（）是Spark组件生命周期的一种方法。如果你想改变皮肤的状态;我强烈建议你使用这些生命周期方法，而不是“自己动手”。因此，您可以在业务类中使用SkinState元数据标记定义每个状态，然后在皮肤类中实现每个状态。如果你专注于MX/Halo实现，Spark方法对你来说可能是新的。 – JeffryHouser 2011-03-23 03:45:09

awesome.thank你！ – 2011-03-23 04:17:42

如何在Flex中实现这个伪TabNavigation UI？

回答

相关问题