Flex中TabNavigator隐藏和显示选项卡

时间:2021-02-19 06:26:20

1、问题背景

     遇到这样一个问题:有四个Tab选项卡,根据不同的参数隐藏和显示选项卡


2、实现实例

(1)隐藏“春季”

protected function springClickHandler(event:MouseEvent):void
{
tabs.getTabAt(0).visible = false;
tabs.getTabAt(0).includeInLayout = false;
tabs.getTabAt(1).visible = true;
tabs.getTabAt(1).includeInLayout = true;
tabs.getTabAt(2).visible = true;
tabs.getTabAt(2).includeInLayout = true;
tabs.getTabAt(3).visible = true;
tabs.getTabAt(3).includeInLayout = true;
tabs.selectedIndex = 1;
}


(2)隐藏“夏季”

protected function summerClickHandler(event:MouseEvent):void
{
tabs.getTabAt(0).visible = true;
tabs.getTabAt(0).includeInLayout = true;
tabs.getTabAt(1).visible = false;
tabs.getTabAt(1).includeInLayout = false;
tabs.getTabAt(2).visible = true;
tabs.getTabAt(2).includeInLayout = true;
tabs.getTabAt(3).visible = true;
tabs.getTabAt(3).includeInLayout = true;
tabs.selectedIndex = 0;
}


(3)隐藏“秋季”

protected function autumnClickHandler(event:MouseEvent):void
{
tabs.getTabAt(0).visible = true;
tabs.getTabAt(0).includeInLayout = true;
tabs.getTabAt(1).visible = true;
tabs.getTabAt(1).includeInLayout = true;
tabs.getTabAt(2).visible = false;
tabs.getTabAt(2).includeInLayout = false;
tabs.getTabAt(3).visible = true;
tabs.getTabAt(3).includeInLayout = true;
tabs.selectedIndex = 0;
}


(4)隐藏“冬季”

protected function winterClickHandler(event:MouseEvent):void
{
tabs.getTabAt(0).visible = true;
tabs.getTabAt(0).includeInLayout = true;
tabs.getTabAt(1).visible = true;
tabs.getTabAt(1).includeInLayout = true;
tabs.getTabAt(2).visible = true;
tabs.getTabAt(2).includeInLayout = true;
tabs.getTabAt(3).visible = false;
tabs.getTabAt(3).includeInLayout = false;
tabs.selectedIndex = 0;
}


(5)显示“四季”

protected function fourClickHandler(event:MouseEvent):void
{
tabs.getTabAt(0).visible = true;
tabs.getTabAt(0).includeInLayout = true;
tabs.getTabAt(1).visible = true;
tabs.getTabAt(1).includeInLayout = true;
tabs.getTabAt(2).visible = true;
tabs.getTabAt(2).includeInLayout = true;
tabs.getTabAt(3).visible = true;
tabs.getTabAt(3).includeInLayout = true;
tabs.selectedIndex = 0;
}


3、实例结果

(1)初始化

Flex中TabNavigator隐藏和显示选项卡

(2)点击“春季”按钮

Flex中TabNavigator隐藏和显示选项卡


(3)点击“夏季”按钮

Flex中TabNavigator隐藏和显示选项卡


(4)点击“秋季”按钮

Flex中TabNavigator隐藏和显示选项卡


(5)点击“冬季”按钮

Flex中TabNavigator隐藏和显示选项卡


(6)点击“四季”按钮

Flex中TabNavigator隐藏和显示选项卡