0

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

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

弹性代码中是否有另一个简单的解决方案？或者，如果有人可以向我展示如何制作自定义 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'
4

3 回答 3

0

[编辑] Flex 的contentBackgroundAlpha和contentBackgroundColor样式List有些误导！您通常希望设置项目渲染器的样式。在列表的上下文中，这些样式只会影响可能出现在列表周围的一小部分“镶边” 。有关渲染器样式的详细信息，请参见下文。

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

Flex List 组件回收项目渲染器以提高效率，并且只创建所需数量的渲染器来显示当前可见的内容。为此，列表会填充渲染器的data属性。所以你想使用这个data属性来配置你的项目渲染器。

一种有效的方法是覆盖 setter 函数data。创建一个扩展的新 Actionscript 类，将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;
}

您可能希望配置该iconDisplayBitmapImage 以查看您想要的样子。上面的方法可能会被频繁调用，因此您可以将只需要在其他地方发生一次的代码...通过覆盖 Flex 组件生命周期方法，例如createChildren()：

override protected function createChildren():void
{
    super.createChildren();
    iconDisplay.scaleMode="letterbox";
    iconDisplay.smooth=true;
}

现在告诉List使用你的渲染器和这样的语法：

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

样式化渲染器：

<s:List alternatingItemColors="[0xFFFFFF, 0xFFFFFF]" selectionColor="#FF0000" />

另一种方法是覆盖移动项目渲染器drawBackground()和/或drawBorder()受保护的方法，并使用图形 api 绘制您自己的东西（或根本不绘制）。

提供数据：

与其给列表一个BitmapImage组件数组，不如给它一个包含数据的对象数组。最好使用强类型对象，但这也有效：

<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>

我喜欢在 Actionscript 中编写渲染器……但IconItemRenderer在顶部的文档链接中也有一个 MXML 示例。它还显示了如何在此渲染器中设置两个文本区域的值（使用labelField和messageField）。您还可以指定返回标签/消息/图标值的函数（使用labelFunction、messageFunction和iconFunction）。

于 2012-04-28T06:01:59.103 回答
-1

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

不是 100% 这是你要找的，不是很熟悉这个类。你有什么理由使用它来扩展LabelItemRenderer？

编辑

我相信您可能想要扩展IconItemRenderer

看看这个教程

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

于 2012-04-27T21:26:29.370 回答
-1

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

autoDrawBackground="false"

这很简单，而且很有效。

于 2012-04-28T23:36:50.013 回答