【Flex4.6】TabBar组件运用【华丽篇】_flexbar插件教程-优快云博客

本文链接：https://blog.youkuaiyun.com/dlamwz/article/details/48232787

第一步呢还是先建立个项目说起,如图1所示：

图1项目

2.接下来在我们应用程序里从组件库拖入一个tabBar组件,如图2所示

图2

3.查看属性面板，在面板里外观选项里单击箭头如图3所示:

图2

4.查看属性面板，在面板里外观选项里单击箭头如图3所示:

5.大家看下，下面代码重点就在项目项呈器里的组件，我们如果要修改导航按钮就要修改导航内置按钮组件外观方可达到效果：

复制代码

6.那这样我们继续开始建立状态按钮组件，大家要记清楚不是普通按钮是状态按钮，点击下，就陷下去，在按下就弹上来，

就酱紫。我们选中ButtonBarButton改组件去设计面板看下属性，如图5所示：

7.改按钮继承了ToggleButton 状态按钮组件，并继承了 IItemRenderer 项呈器接口，所以我们重写改组件按钮方可，继续点

击外观右侧的箭头创建外观，如图6所示：

8.我们从状态标签</states>开始删除按钮的绘制的标签一直删除到<s:label>标签前停止。

9.在把代码报错找不到元素的相关函数删除方可。

10.我们在</states><s:label>这两个标签中间开始绘制我们的外观，请看下面代码：

复制代码

我们绘制了个矩形以各个间距为0开始全部填出，初始状态为白色，当鼠标选择和鼠标离开状态变为橘黄色，以及添加了个滤镜，只在鼠标选择对象和鼠标离开状态则显示。

11.下面我们回到TabBarSkin文件里，在ButtonBarButton外观进行更换，代码如下：

复制代码

12.好了我们回到我们主应用程序里给我们组件添加些数据，然后导航才能显示，代码如下：

复制代码

13.效果如图7所示：

14.导航外观基本是写完了具体怎么配好看大家可以随便用外观的颜色进行搭配比如下图所示：

好了本节就到这里，本教程主要是一个朋友催我几天了，我就特意给他做了个，既然杜乐乐不如众乐乐。