如何利用Flash Builder4.0创建TabBar

2025-12-04 09:55:04

1、在新建的Flex项目中,在指定的路径下创建Flex应用程序“TabBar.mxml”,如下图所示:

如何利用Flash Builder4.0创建TabBar

2、将Flash Builder4.0切换到设计视图下,如下图所示:

如何利用Flash Builder4.0创建TabBar

3、在左侧的组件视图中,找到TabBar导航器控件,并将其拖放到设计视图窗口上,如下图所示:

如何利用Flash Builder4.0创建TabBar

4、将窗口切换到源代码编辑视图窗口,如下图所示:

如何利用Flash Builder4.0创建TabBar

5、在TabBar中添加change事件和数据源

<s:TabBar id="tabBar" x="400" y="200" change="tabBar_changeHandler(event)">

<s:dataProvider>

<s:ArrayCollection source="['春天', '夏天', '秋天', '冬天']" />

</s:dataProvider>

</s:TabBar>

<fx:Script>

<![CDATA[

import mx.controls.Alert;

import spark.events.IndexChangeEvent;

protected function tabBar_changeHandler(event:IndexChangeEvent):void

{

Alert.show(tabBar.selectedItem);

}

]]>

</fx:Script>

如下图所示:

如何利用Flash Builder4.0创建TabBar

6、运行Flex应用程序,点击TabBar上的按钮,会弹出打印的选择的text内容,如下图所示:

如何利用Flash Builder4.0创建TabBar

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢