Flex笔记_使用Spark列表控件

ButtonBar

• 创建ButtonBar时，可以使用任何实现了ICollectionView接口的对象作为dataProvider。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingTop="20"/>
</s:layout>
<s:ButtonBar>
<s:ArrayCollection>
<fx:String>Button 1</fx:String>
<fx:String>Button 2</fx:String>
<fx:String>Button 3</fx:String>
<fx:String>Button 4</fx:String>
</s:ArrayCollection>
</s:ButtonBar>
</s:Application>

List

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout gap="1" useVirtualLayout="true"/>
</s:layout>
<s:List>
<s:dataProvider>
<s:ArrayCollection>
<fx:String>Item 1</fx:String>
<fx:String>Item 2</fx:String>
<fx:String>Item 3</fx:String>
<fx:String>Item 4</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:List>
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<s:ArrayCollection id="listItems">
<fx:String>Item 1</fx:String>
<fx:String>Item 2</fx:String>
<fx:String>Item 3</fx:String>
<fx:String>Item 4</fx:String>
</s:ArrayCollection>
</fx:Declarations>
<s:layout>
<s:VerticalLayout gap="1" useVirtualLayout="true"/>
</s:layout>
<s:List dataProvider="{listItems}"/>
</s:Application>

DropDownList

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingTop="20"/>
</s:layout>
<s:DropDownList width="200" prompt="Please Select One">
<s:ArrayCollection>
<fx:String>Item 1</fx:String>
<fx:String>Item 2</fx:String>
<fx:String>Item 3</fx:String>
<fx:String>Item 4</fx:String>
</s:ArrayCollection>
</s:DropDownList>
</s:Application>

交互

• 选择项目时默认分发事件：selectionChanged、itemFocusChanged、selectionChanging
• IndexChangedEvent对象

类层次结构

ListBase ->  SkinnableDataContainer -> SkinnableContainerBase -> SkinnableComponent -> UIComponent ->
FlexSprite -> Sprite -> DisplayObjectContainer -> InteractiveObject -> DisplayObject ->
EventDispacher -> Object

构建基于List的自定义组件

构建自定义List组件

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"
width="75%" height="75%"
horizontalCenter="0" verticalCenter="0">
<fx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
private function selectionChangingHandler(evt:IndexChangedEvent):void {
var item:* = list.dataProvider.getItemAt(evt.newIndex);
if(item.type != "travel"){
evt.preventDefault();
}
}
]]>
</fx:Script>
<s:VGroup left="20" right="20" top="20" bottom="20">
<s:Label text="Select a title to see the image."/>
<s:List id="list"
selectionChanging="selectionChangingHandler(event);"
width="100%" height="100%" lineHeight="22">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color="0x999999" alpha="0"
 alpha.hovered="0.2" alpha.selected="0.4"/>
</s:fill>
</s:Rect>
<s:Label id="titleLabel" text="{data.title}"/>
<s:BitmapImage horizontalCenter="80" id="img" source="{data.image}" includeIn="selected"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:dataProvider>
<s:ArrayList>
<fx:Object type="travel" title="Item 1" image="images/item1.jpg"/>
<fx:Object type="travel" title="Item 2" image="images/item2.jpg"/>
<fx:Object type="travel" title="Item 3" image="images/item3.jpg"/>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:VGroup>
</s:Group>