Question

我有一个带有tileLayout图像的简单列表。从我看过的例子看起来我应该使用DefaultComplexItemRenderer。它工作正常，我的图像数组加载很好，但每个项目都有一个坚实的背景。我需要每个图像背后的背景为alpha为0.如何设置？

过去我刚刚创建了一个自定义的itemRenderer，并覆盖了itemRenderers上的drawBackground函数，但是DefaultComplexRenderer没有要覆盖的drawBackground函数。

flex代码中是否有另一个简单的解决方案？或者，如果有人可以告诉我如何制作自定义DefaultComplexRenderer，那就太棒了。

注意：这是一个Flex MOBILE项目。我知道有些itemRenderer对手机不友好。 Adobe说“总是在AS3而不是mxml中执行项目渲染器”，所以请记住这一点。

谢谢！

这是我的代码：

    <fx:Declarations>
        <s:ArrayList id="arrList">
            <s:BitmapImage source="assets/images/one.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
            <s:BitmapImage source="assets/images/two.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
            <s:BitmapImage source="assets/images/three.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
            <s:BitmapImage source="assets/images/four.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
        </s:ArrayList>
    </fx:Declarations>



<s:List id="extrasList_list" width="100%" height="100%"
                        dataProvider="{arrList}"
                        itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
                        horizontalCenter="0"
                        verticalCenter="0">
                    <s:layout>
                        <s:TileLayout requestedColumnCount="-1"
                                      requestedRowCount="-1"
                                      horizontalGap="10"
                                      verticalGap="10"
                                      orientation="rows"
                                      columnAlign="justifyUsingWidth" 
                                      />
                    </s:layout>
                </s:List>

我尝试过的事情：

这在我的主要css文件中......

s|DefaultComplexItemRenderer {
    contentBackgroundAlpha:0;
}

但是我得到了这个警告，它不起作用......

-Cannot resolve namespace qualified type 'DefaultComplexItemRenderer' in CSS selector 'DefaultComplexItemRenderer'

Answer 1

<强> [编辑] Flex contentBackgroundAlpha的{{1}}和contentBackgroundColor样式有些误导！您通常希望为项呈示器设置样式。在列表的上下文中，这些样式只会影响一小部分“chrome”，它们可以出现在列表中。有关渲染器样式的详细信息，请参阅下文。

如果您只想展示图片，IconItemRenderer就是您的选择。它扩展了List，因此它针对移动设备进行了优化，并且还具有两个文本字段。

Flex List组件回收项目渲染器效率很高，并且只根据需要创建尽可能多的渲染器以显示当前可见的内容。为此，列表将填充渲染器的LabelItemRenderer属性。因此，您希望使用此data属性配置项呈示器。

有效的方法是覆盖data的setter函数。创建一个新的Actionscript类，扩展data将其添加到其中：

IconItemRenderer

您可能希望将override public function set data(value:Object):void { super.data = value; // IconItemRenderer already has a BitmapImage component, it's property name is iconDisplay // your ArrayList should therefore only contain Strings representing the image sources // note how I've changed your ArrayList in the declarations tag below iconDisplay.source = data.imageSource; } BitmapImage配置为您想要的样子。上面的方法可能会被频繁调用，因此您可以通过覆盖像iconDisplay这样的Flex组件生命周期方法来放置只需要在其他地方发生的代码...

createChildren()

现在告诉override protected function createChildren():void { super.createChildren(); iconDisplay.scaleMode="letterbox"; iconDisplay.smooth=true; }使用你的渲染器w /语法：

List

为渲染器设置样式：

<s:List itemRenderer="com.yourdomain.or.whatever.MyIconItemRendererClass" />

另一种方法是覆盖移动项目渲染器的<s:List alternatingItemColors="[0xFFFFFF, 0xFFFFFF]" selectionColor="#FF0000" />和/或drawBackground()受保护的方法，并使用图形API绘制自己的东西（或者根本没有）。

提供数据：

不是给列表提供drawBorder()组件的数组，而是给它一个包含数据的对象数组。最好使用强类型对象，但这也适用：

BitmapImage

我喜欢在Actionscript中编写渲染器......但是在顶部的<fx:Declarations> <s:ArrayList id="arrList"> <fx:Object imageSource="assets/images/one.png" /> <fx:Object imageSource="assets/images/two.png" /> <fx:Object imageSource="assets/images/three.png" /> </s:ArrayList> </fx:Declarations>文档的链接中也有一个MXML示例。它还显示了如何设置此渲染器中两个文本区域的值（使用IconItemRenderer和labelField）。您还可以指定一个返回标签/消息/图标值的函数（使用messageField，labelFunction和messageFunction）。

Answer 2

看起来您应该可以在DefaultComplexItemRenderer上使用setStyle('contentBackgroundAlpha', 0);。

不是100％这是你正在寻找的，不熟悉这个课程。你是否因为扩展LabelItemRenderer而使用它？

修改

我相信您可能希望延长IconItemRenderer

查看本教程

http://www.youtube.com/watch?v=EOpsDZaQrOI

Answer 3

感谢您尝试帮助他们，但我发现最简单/最简单的解决方案就像将SDK中的DefaultComplexItemRender复制到自定义的一样简单，然后更改这一行代码

autoDrawBackground="false"

这很简单，也很有效。

如何将Default Complex ItemRenderer背景alpha设置为0

3 个答案: