Flex中如何通过设置separatorWidth样式来设定LinkBar控件各项目间分隔宽度的例子

Flex中LinkBar控件的例子，前面已经讲过几个了。例如 通过horizontalGap设置各项目间横向间隔的例子， 通过verticalGap
设定LinkBar控件各项目纵向间隔(vertical spacing)的例子以及 如何设定LinkBar控件链接间分隔符颜色的例子等。接下来的例子则演示了如何通过设置separatorWidth样式来设定LinkBar控件各项目间分隔宽度。

让我们先来看一下Demo（可以右键View Source或 点击这里察看源代码 ）：

下面是完整代码(或 点击这里查看)：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
7.     <mx:Array id="arr">
8.         <mx:Object label="Alert" />
9.         <mx:Object label="Button" />
10.         <mx:Object label="ButtonBar" />
11.         <mx:Object label="CheckBox" />
12.         <mx:Object label="ColorPicker" />
13.         <mx:Object label="ComboBox" />
14.     </mx:Array>
16.     <mx:ApplicationControlBar dock="true">
17.         <mx:Form styleName="plain">
18.             <mx:FormItem label="separatorWidth:">
19.                 <mx:HSlider id="slider"
20.                         minimum="0"
21.                         maximum="10"
22.                         value="1"
23.                         liveDragging="true"
24.                         snapInterval="1"
25.                         tickInterval="1" />
26.             </mx:FormItem>
27.         </mx:Form>
28.     </mx:ApplicationControlBar>
30.     <mx:LinkBar id="linkBar"
31.             dataProvider="{arr}"
32.             separatorWidth="{slider.value}" />
34. </mx:Application>