`
quyijiayou
  • 浏览: 1187 次
  • 性别: Icon_minigender_2
  • 来自: 大连
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

TabNavigator动态删除tab后selectedIndex设置失效的问题

XML 
阅读更多
关于TabNavigator动态removeAllChildren之后selectedIndex设置失效的解决办法。

调查发现,当remove所有的tab,再动态创建新的tab后,selectedIndex的设置就会失效。所以要保证TabNavigator在remove时至少要保持一个tab存在。

下面是一个简单的小例子:

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="vertical" 
        verticalAlign="middle" 
        backgroundColor="white"> 
  
    <mx:Script> 
    <![CDATA[
    	import mx.containers.VBox; 

  		public var _num:int = 0;				// tab数
  		
  		/*
  		* 重置:移去当前所有tab,重置两个新的tab
  		*/
  		private function remove():void 
  		{
        	// tab页存在的情况下
        	if ( _num > 0 )
        	{
				// 新建一个临时tab页 并把它加到TabNavigator的最前面。
				var tempVbox:VBox = new VBox;
    			tabs.addChildAt( tempVbox, 0 );
				
				// remove除了临时tab页之外的所有tab
				for ( var i:int = _num; i > 0; i-- )
				{
					tabs.removeChildAt( i );
				}
				// 重置tab数
        		_num = 0; 
        	}
        	
        	// 新建2个tab
        	reset( 2 );
    		
    		// remove临时tab
    		tabs.removeChildAt( 0 );
    		
    		// 设置选中页
            tabs.selectedIndex = 0;
        } 
  		
  		/*
		* 新建num个tab
  		*/
        private function reset( num:int = 1 ):void 
        { 
    		for ( var i:int = 0; i < num; i++)
    		{
    			var vbox:VBox = new VBox;
	    		vbox.label = "Panel " + (_num + 1).toString();
	    		tabs.addChild( vbox );
	    		_num++;
    		}
        } 
    ]]> 
    </mx:Script> 
  
    <mx:Button label="重置" click="remove()"/>
    <mx:Button label="新建" click="reset()"/>
    <mx:TabNavigator id="tabs" width="500" height="200"/>
  
</mx:Application>
分享到:
评论

相关推荐

    flex TabNavigator tab倒置

    "flex TabNavigator tab倒置"这个标题可能指的是开发者想要实现一个特殊的布局,即TabNavigator的选项卡位置或方向与默认设置相反,通常是垂直放置或底部显示。下面我们将详细讨论如何实现这种效果,并探讨相关的...

    设置TabNavigator组件的标签头的自定义皮肤

    本文将详细探讨如何为TabNavigator组件的标签头设置自定义皮肤,以实现个性化的设计需求。 首先,我们需要了解`TabNavigator`的基本结构。`TabNavigator`由多个`StackNavigator`或者`Screen`组成,每个标签对应一个...

    flex3 tabnavigator一个很好的例子

    6. **数据绑定**:在Flex3中,TabNavigator还可以与数据模型进行绑定,根据数据动态生成选项卡,这在处理大量数据或需要动态生成界面的情况下非常有用。 在给定的文件列表中,`.actionScriptProperties`、`....

    Flex4.6 带图标的TabNavigator的使用

    如果你更喜欢使用ActionScript,你可以动态地创建`TabNavigator`及其内容: ```actionscript var myTabNavigator:TabNavigator = new TabNavigator(); var tab1:NavigatorContent = new NavigatorContent(); tab1....

    React-Native 实现点击Tab标签切换Tab页面

    在实际开发中,你可能还需要处理更复杂的需求,比如添加Tab切换的动画、设置未选中时的图标样式、自定义Tab Bar的背景色等。这可以通过调整`Tab.Navigator`的配置项以及`Tab.Screen`的`options`属性来实现。 总结来...

    Rn Tab导航封装

    "Rn Tab导航封装"是指开发者将React Native的Tab导航组件进行二次封装,以实现更灵活、可配置的功能,如动态设置Tab和标题栏。这种封装通常会涉及对原生组件的优化,提高性能,同时提供更友好的API供开发者使用。 ...

    Flex中TabNavigator设置Tabs样式思路及

    在Flex框架中,TabNavigator组件是用来创建标签导航界面的一种方式,它能够展示一组...例如,可以为每个Tab设置不同的图标、鼠标悬停效果、点击效果等,使得整个TabNavigator不仅在视觉上,也在交互上更加吸引用户。

    Flex3 TabNavigator

    这样的实现使得用户可以在运行时动态地关闭TabNavigator中的标签页,增加了交互性和用户体验。需要注意的是,完整的`RichTab`类应该包含处理关闭事件的逻辑,以及在标签页上显示关闭按钮的UI元素。在实际项目中,...

    Flex3 竖排TabNavigator

    默认情况下,TabNavigator的标签页是水平排列的,但在这个特定的实例中,我们将讨论如何将TabNavigator的标签页设置为垂直(竖排)显示。 创建竖排TabNavigator的关键在于自定义布局策略。在Flex3中,组件的布局由...

    Flex中实现多行tab的源代码

    默认情况下,Flex的TabNavigator组件的TabBar控件只会在一行内显示Tab项,但通过自定义布局和样式,我们可以轻松实现多行Tab的展示。本示例将详细讲解如何在Flex中创建多行Tab,并提供相关源代码。 首先,让我们...

    TabNavigator_ScrollableMenu

    《TabNavigator_ScrollableMenu:打造更优交互的Tab导航体验》 在Flex开发中,TabNavigator组件是常用于创建带有可切换选项卡的应用界面。然而,随着应用复杂度的提升,用户对于更加灵活和易用的选项卡导航的需求也...

    Rn Tab导航

    1. **TabNavigator**: 这是整个Tab导航组件的基础,它接收一系列的配置项,如`tabs`(包含每个Tab的内容)、`initialTab`(初始选中的Tab)以及`configureScene`(定义页面过渡效果)等。 2. **Tab**: 每个Tab都是...

    Flex tabNavigator 的初级应用

    NULL 博文链接:https://zhangyinyou.iteye.com/blog/671128

    flex checkboxtree 和可增加面板,可关闭的tab页

    `TabNavigator`允许用户在多个视图之间切换,而每个视图(即“tab”)可以添加或删除。实现这个功能涉及以下步骤: 1. **创建TabNavigator**:首先,你需要在应用中创建一个`TabNavigator`实例,并添加初始的`Tab`...

    TabNavigator一个reactnative底部菜单

    在React Native应用开发中,创建用户友好的界面是至关重要的,而底部导航栏(Bottom Tab Navigator)是许多应用的标准设计元素。本文将深入探讨如何使用`TabNavigator`来实现一个React Native底部菜单,并涵盖相关的...

    flex 遮盖式 TabNavigator

    "遮盖式 TabNavigator"可能指的是在设计时或运行时TabNavigator的特定样式或行为,其中选项卡可能会覆盖其他内容,而不是简单地堆叠或切换。 这篇博客文章(虽然链接不可用)可能深入探讨了如何自定义Flex中的...

    使用react-native-tab-navigator,push之后隐藏tabbar

    本文将深入探讨如何在使用`react-native-tab-navigator`时,实现在进行页面推送(push)操作后隐藏TabBar。 首先,让我们了解`react-native-tab-navigator`的基本概念。这是一个组件库,它提供了可自定义的TabBar...

    React-Native实现App底部tab切换

    在React-Native中,开发移动应用时,底部Tab栏是一种常见的导航模式,用于在多个主要功能之间切换。本文将深入探讨如何使用React-Native来实现这样的功能,以及项目引导页和点击“启动应用”后的跳转逻辑。 首先,...

    点击底部菜单 tab滑出效果

    在移动应用设计中,用户体验是至关重要的因素之一,而底部菜单(Tab Bar)作为常见的导航元素,能够帮助用户轻松地在各个主要功能间切换。本文将深入探讨如何实现“点击底部菜单 tab滑出效果”,以及涉及到的相关...

    RN_ViewPager:StackNavigator加TabNavigator

    `TabNavigator`同样来自React Navigation库,它可以配置多个`Tab.Screen`,每个`Tab.Screen`代表一个导航堆栈。 例如: ```javascript import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';...

Global site tag (gtag.js) - Google Analytics