关于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倒置"这个标题可能指的是开发者想要实现一个特殊的布局,即TabNavigator的选项卡位置或方向与默认设置相反,通常是垂直放置或底部显示。下面我们将详细讨论如何实现这种效果,并探讨相关的...
本文将详细探讨如何为TabNavigator组件的标签头设置自定义皮肤,以实现个性化的设计需求。 首先,我们需要了解`TabNavigator`的基本结构。`TabNavigator`由多个`StackNavigator`或者`Screen`组成,每个标签对应一个...
6. **数据绑定**:在Flex3中,TabNavigator还可以与数据模型进行绑定,根据数据动态生成选项卡,这在处理大量数据或需要动态生成界面的情况下非常有用。 在给定的文件列表中,`.actionScriptProperties`、`....
如果你更喜欢使用ActionScript,你可以动态地创建`TabNavigator`及其内容: ```actionscript var myTabNavigator:TabNavigator = new TabNavigator(); var tab1:NavigatorContent = new NavigatorContent(); tab1....
在实际开发中,你可能还需要处理更复杂的需求,比如添加Tab切换的动画、设置未选中时的图标样式、自定义Tab Bar的背景色等。这可以通过调整`Tab.Navigator`的配置项以及`Tab.Screen`的`options`属性来实现。 总结来...
"Rn Tab导航封装"是指开发者将React Native的Tab导航组件进行二次封装,以实现更灵活、可配置的功能,如动态设置Tab和标题栏。这种封装通常会涉及对原生组件的优化,提高性能,同时提供更友好的API供开发者使用。 ...
在Flex框架中,TabNavigator组件是用来创建标签导航界面的一种方式,它能够展示一组...例如,可以为每个Tab设置不同的图标、鼠标悬停效果、点击效果等,使得整个TabNavigator不仅在视觉上,也在交互上更加吸引用户。
这样的实现使得用户可以在运行时动态地关闭TabNavigator中的标签页,增加了交互性和用户体验。需要注意的是,完整的`RichTab`类应该包含处理关闭事件的逻辑,以及在标签页上显示关闭按钮的UI元素。在实际项目中,...
默认情况下,TabNavigator的标签页是水平排列的,但在这个特定的实例中,我们将讨论如何将TabNavigator的标签页设置为垂直(竖排)显示。 创建竖排TabNavigator的关键在于自定义布局策略。在Flex3中,组件的布局由...
默认情况下,Flex的TabNavigator组件的TabBar控件只会在一行内显示Tab项,但通过自定义布局和样式,我们可以轻松实现多行Tab的展示。本示例将详细讲解如何在Flex中创建多行Tab,并提供相关源代码。 首先,让我们...
《TabNavigator_ScrollableMenu:打造更优交互的Tab导航体验》 在Flex开发中,TabNavigator组件是常用于创建带有可切换选项卡的应用界面。然而,随着应用复杂度的提升,用户对于更加灵活和易用的选项卡导航的需求也...
1. **TabNavigator**: 这是整个Tab导航组件的基础,它接收一系列的配置项,如`tabs`(包含每个Tab的内容)、`initialTab`(初始选中的Tab)以及`configureScene`(定义页面过渡效果)等。 2. **Tab**: 每个Tab都是...
NULL 博文链接:https://zhangyinyou.iteye.com/blog/671128
`TabNavigator`允许用户在多个视图之间切换,而每个视图(即“tab”)可以添加或删除。实现这个功能涉及以下步骤: 1. **创建TabNavigator**:首先,你需要在应用中创建一个`TabNavigator`实例,并添加初始的`Tab`...
在React Native应用开发中,创建用户友好的界面是至关重要的,而底部导航栏(Bottom Tab Navigator)是许多应用的标准设计元素。本文将深入探讨如何使用`TabNavigator`来实现一个React Native底部菜单,并涵盖相关的...
"遮盖式 TabNavigator"可能指的是在设计时或运行时TabNavigator的特定样式或行为,其中选项卡可能会覆盖其他内容,而不是简单地堆叠或切换。 这篇博客文章(虽然链接不可用)可能深入探讨了如何自定义Flex中的...
本文将深入探讨如何在使用`react-native-tab-navigator`时,实现在进行页面推送(push)操作后隐藏TabBar。 首先,让我们了解`react-native-tab-navigator`的基本概念。这是一个组件库,它提供了可自定义的TabBar...
在React-Native中,开发移动应用时,底部Tab栏是一种常见的导航模式,用于在多个主要功能之间切换。本文将深入探讨如何使用React-Native来实现这样的功能,以及项目引导页和点击“启动应用”后的跳转逻辑。 首先,...
在移动应用设计中,用户体验是至关重要的因素之一,而底部菜单(Tab Bar)作为常见的导航元素,能够帮助用户轻松地在各个主要功能间切换。本文将深入探讨如何实现“点击底部菜单 tab滑出效果”,以及涉及到的相关...
`TabNavigator`同样来自React Navigation库,它可以配置多个`Tab.Screen`,每个`Tab.Screen`代表一个导航堆栈。 例如: ```javascript import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';...