IconItemRenderer 类是针对手机设备优化的高性能项呈示器。为基于列表的控件中的每项显示四个可选部件:
-
iconField或iconFunction属性定义的、位于左侧的图标。 -
labelField或labelFunction属性定义的图标旁边的单行文本标签。 -
messageField或messageFunction属性定义的文本标签下方的多行消息。 -
decorator属性定义的、位于右侧的修饰符图标。
要将 CSS 样式应用于单行文本标签(例如字体大小和颜色),请对 IconItemRenderer 类设置样式。要对多行消息设置样式,请使用 messageStyleNameM 样式属性。以下示例为文本标签和消息设置文本样式:
<fx:Style>
.myFontStyle {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<s:List id="myList"
width="100%" height="100%"
labelField="firstName">
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer messageStyleName="myFontStyle" fontSize="25"
labelField="firstName"
messageField="lastName"
decorator="@Embed(source='assets/logo_small.jpg')"/>
</fx:Component>
</s:itemRenderer>
<s:ArrayCollection>
<fx:Object firstName="Dave" lastName="Duncam" company="Adobe" phone="413-555-1212"/>
<fx:Object firstName="Sally" lastName="Smith" company="Acme" phone="617-555-1491"/>
<fx:Object firstName="Jim" lastName="Jackson" company="Beta" phone="413-555-2345"/>
<fx:Object firstName="Mary" lastName="Moore" company="Gamma" phone="617-555-1899"/>
</s:ArrayCollection>
</s:List>
隐藏 MXML 语法
The <s:IconItemRenderer> tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:IconItemRenderer
Properties
decorator=""
iconContentLoader="See property description"
iconField="null"
iconFillMode=""scale
iconFunction="null"
iconHeight="NaN"
iconPlaceholder="null"
iconScaleMode="stretch"
iconWidth="NaN"
label=""
labelField="null"
labelFunction="null"
messageField="null"
messageFunction="null"
Common Styles
horizontalGap="8"
iconDelay="500"
messageStyleName="iconItemRendererMessageStyle"
verticalGap="6"
>
查看示例
样式为常见样式,或与特定主题关联。如果为常见样式,则可以用于任何主题。如果样式与特定主题关联,则只有应用程序使用该主题时才能使用该样式。
decorator:Object
显示在该项呈示器右侧的修饰符图标。
修饰符图标忽略 verticalAlign 样式,始终垂直居中显示。
修饰符图标应为嵌入资源。如果使用外部资源,可能会导致性能降低。
默认值为 ""。
public function get decorator():Object public function set decorator(value:Object):void
protected var decoratorDisplay:BitmapImage
用于显示该项呈示器的修饰符的显示对象组件。
默认值为 null。
iconContentLoader:IContentLoader
要与内容加载器客户端相关联的可选自定义图像加载器(例如,图像缓存或队列)。
默认值是在 IconItemRenderer 上定义的静态内容缓存,它最多允许存放 100 条。
public function get iconContentLoader():IContentLoader public function set iconContentLoader(value:IContentLoader):void
protected var iconDisplay:BitmapImage
用于显示项呈示器的图标数据的位图图像组件。
iconField:String
数据项中作为图标显示的字段名称。默认情况下,iconField 为 null,且项呈示器不显示图标。
默认值为 null。
public function get iconField():String public function set iconField(value:String):void
iconFillMode:String
确定位图填充尺寸的方式。如果在标签中设置此属性的值,请使用字符串(如“repeat”)。如果您在 ActionScript 中设置此属性的值,请使用常量(如 mx.graphics.BitmapFillMode.CLIP)。
设置为 BitmapFillMode.CLIP(“clip”)时,位图在区域的边缘处结束。
设置为 BitmapFillMode.REPEAT(“repeat”)时,位图将重复以填充区域。
设置为 BitmapFillMode.SCALE(“scale”)时,位图将拉伸以填充区域。
默认值为 mx.graphics.BitmapFillMode.SCALE。
public function get iconFillMode():String public function set iconFillMode(value:String):void
iconFunction:Function
用户提供的函数,在每个项目上运行以确定其图标。iconFunction 属性覆盖 iconField 属性。
可以提供一个 iconFunction,用于查找合适的字段并返回将用作图标的有效 URL 或对象。
icon 函数仅使用数据提供程序中的某项作为唯一参数,并返回一个作为 source 属性传递给 spark.primitives.BitmapImage 对象的 Object。icon 函数可以返回一个指向图像的有效 URL 或返回一个表示图像的 Class 文件。要了解从 icon 函数可以返回其它哪些类型的对象,请参阅 BitmapImage 文档
myIconFunction(item:Object):Object
默认值为 null。
public function get iconFunction():Function public function set iconFunction(value:Function):void
iconHeight:Number
图标的高度。如果未指定,则使用图像的固有高度。
默认值为 NaN。
public function get iconHeight():Number public function set iconHeight(value:Number):void
iconPlaceholder:Object
正在下载外部加载资源时要使用的图标资源。
该资源应为嵌入图像而非外部加载图片。
默认值为 null。
public function get iconPlaceholder():Object public function set iconPlaceholder(value:Object):void
iconScaleMode:String
确定当 fillMode 设置为 mx.graphics.BitmapFillMode.SCALE 时如何缩放图像。
当设置为 mx.graphics.BitmapScaleMode.STRETCH(“伸展”)时,图像被伸展以适应区域。
在设置为 BitmapScaleMode.LETTERBOX (“letterbox”) 时,根据原始未缩放的图像的高宽比对图像进行缩放。
当设置为 BitmapScaleMode.ZOOM(“缩放”),图像会缩放以适应原始的未缩放图像的高宽比。这会导致在一个轴上出现裁剪。
默认值为 mx.graphics.BitmapScaleMode.STRETCH。
public function get iconScaleMode():String public function set iconScaleMode(value:String):void
iconWidth:Number
图标的宽度。如果未指定,则使用图像的固有宽度。
默认值为 NaN。
public function get iconWidth():Number public function set iconWidth(value:Number):void
label:String[覆盖]
如果 labelFunction = labelField = null,则使用从列表控件推入的 label 属性。但是,如果 labelField 显式设置为 ""(空字符串),则不会显示标签。
要在项呈示器中显示的 String。
项呈示器的主机组件可以使用 itemToLabel() 方法将数据项目转换为 String 以便项呈示器可以将其显示。
对于诸如 List 和 ButtonBar 等控件,可以使用 labelField 或 labelFunction 属性指定包含 String 的数据项目的字段。否则,主机组件使用 toString() 方法将数据项目转换为 String。
override public function get label():String override public function set label(value:String):void
labelField:String
数据提供程序项目中作为标签显示的字段名称。labelFunction 属性将覆盖此属性。
如果 labelFunction = labelField = null,则使用从基于列表的控件推入的 label 属性。但是,如果 labelField 显式设置为 ""(空字符串),则不会显示标签。
默认值为 null。
public function get labelField():String public function set labelField(value:String):void
labelFunction:Function
用户提供的函数,在每个项目上运行以确定其标签。labelFunction 属性覆盖 labelField 属性。
您可以提供一个 labelFunction,用于查找合适的字段并返回可显示的字符串。labelFunction 还非常适用于处理格式设置和本地化。
label 函数仅使用数据提供程序中的某个项目作为唯一参数,并返回一个字符串。
myLabelFunction(item:Object):String
如果 labelFunction = labelField = null,则使用从基于列表的控件推入的 label 属性。但是,如果 labelField 显式设置为 ""(空字符串),则不会显示标签。
默认值为 null。
public function get labelFunction():Function public function set labelFunction(value:Function):void
protected var messageDisplay:spark.components.supportClasses:StyleableTextField
用于显示项呈示器的消息数据的文本组件。
messageField:String
数据项中作为消息显示的字段名称。messageFunction 属性覆盖此属性。
使用 messageStyleName 样式控制文本的外观。
默认值为 null。
public function get messageField():String public function set messageField(value:String):void
messageFunction:Function
用户提供的函数,在每个项目上运行以确定其消息。messageFunction 属性覆盖 messageField 属性。
您可以提供一个 messageFunction,用于查找合适的字段并返回可显示的字符串。messageFunction 还非常适用于处理格式设置和本地化。
message 函数仅使用数据提供程序中的某项作为唯一参数,并返回一个字符串。
myMessageFunction(item:Object):String
默认值为 null。
public function get messageFunction():Function public function set messageFunction(value:Function):void
redrawRequested:Boolean
需要重新绘制共享此 DisplayObject 的任何 IGraphicElement 对象时包含 true。此属性仅供 Group 类内部使用,通常不使用它。Group 类会设置和回读此属性,以确定要验证哪些图形元素。
public function get redrawRequested():Boolean public function set redrawRequested(value:Boolean):void
public function invalidateGraphicElementDisplayList(element:IGraphicElement):void
请注意元素已更改且需要重新绘制的主机组件。IGraphicElementHost 必须对 IGraphicElement 调用 validateDisplayList() 方法,才可使其有机会重新绘制。通常,主机将在其 validateDisplayList() 方法中验证元素的显示列表。
:IGraphicElement — 已更改的元素。
public function invalidateGraphicElementProperties(element:IGraphicElement):void
请注意元素已更改且需要验证属性的主机组件。IGraphicElementHost 必须对 IGraphicElement 调用 validateProperties() 方法,才可使其有机会提交其属性。通常,主机将在其 validateProperties() 方法中验证元素属性。
:IGraphicElement — 已更改的元素。
public function invalidateGraphicElementSharing(element:IGraphicElement):void
请注意元素图层已更改的主机。IGraphicElementHost 必须重新计算含有共享 DisplayObject 的图形元素的序列,且可能需要重新指定 DisplayObject,并因此重新绘制这些序列。通常,主机将在其 validateProperties() 方法中执行该操作。
:IGraphicElement — 已更改大小的元素。
public function invalidateGraphicElementSize(element:IGraphicElement):void
请注意元素大小已更改的主机组件。IGraphicElementHost 必须对 IGraphicElement 调用 validateSize() 方法,才可使其有机会验证其大小。通常,主机将在其 validateSize() 方法中验证元素的大小。
:IGraphicElement — 已更改大小的元素。
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the spark IconItemRenderer component -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:List width="100%"
height="100%"
alternatingItemColors="0xE3E3E3"
contentBackgroundColor="0xF9F9F9"
downColor="0x70B2EE"
selectionColor="0x70B2EE"
labelField="productName">
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer
decorator="@Embed('assets/decoratorImage.png')"
iconPlaceholder="@Embed('assets/loadingImage.png')"
iconField="productIcon"
iconWidth="125"
iconHeight="125"
messageField="productDesc" />
</fx:Component>
</s:itemRenderer>
<s:dataProvider>
<s:ArrayList>
<fx:Object productIcon="assets/fx.jpg" productName="Flex SDK"
productDesc="A highly productive, free, open source framework."/>
<fx:Object productIcon="assets/fb.jpg" productName="Flash Builder"
productDesc="Designed to help developers rapidly develop RIAs."/>
<fx:Object productIcon="assets/fc.jpg" productName="Flash Catalyst"
productDesc="An approachable new interaction design tool."/>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:Application>
显示 MXML 语法









