Flex：列表中的背景图像未显示

Question

我有一个自定义组件，其中包含背景图像。但是当你通过List中的ItemRenderer生成此组件时，背景图像就会消失。

我做错了什么？

这里有一张图片。第一个元素没有在列表中生成，并具有背景图像。其他三个元素是列表的一部分，并没有背景图像。

下面是List的MXML代码。

<mx:VBox>
    <solutionItems:displaySolutionItem  />  <!-- This element shows the background image -->                            
    <mx:List selectable="false"
         useRollOver="false" 
         id="listControllers" 
         backgroundAlpha="1"
         dataProvider="{controllers}" >
        <mx:itemRenderer>
            <fx:Component>      
                <solutionItems:displaySolutionItem /> <!-- These elements have nog background image -->                             
            </fx:Component>
        </mx:itemRenderer>
    </mx:List>      
</mx:VBox>

以下是<solutionItems:displaySolutionItem />的代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundImage="{itemBackGround}"
    backgroundSize="100%">

    <mx:Script>
        <![CDATA[


            [Bindable]
            [Embed(source="assets/Components/ContainerBackgrounds/BoxBg.png", scaleGridLeft="5", scaleGridRight="50", scaleGridTop="5", scaleGridBottom="50")]
            private var itemBackGround:Class;


        ]]>
    </mx:Script>
    <mx:VBox
        paddingBottom="10"
        paddingLeft="10"
        paddingRight="10"
        paddingTop="10">        

        <mx:CheckBox id="chbControllerItem" label="NSL-4601" styleName="titleRed" />                    
        <mx:HBox>                       
            <mx:Image width="67" height="50" id="loader1" source="@Embed(source='assets/Components/ContainerBackgrounds/BoxBg.png')"/> 
            <mx:HBox>
                <mx:VBox>
                    <mx:Label text="Cube size" styleName="formLabel" height="12" />
                    <mx:Label text="Cube config" styleName="formLabel" height="12" />
                    <mx:Label text="Display res" styleName="formLabel" height="12" />
                    <mx:Label text="DPI" styleName="formLabel" height="12" />
                    <mx:Label text="Price" styleName="formLabel" height="12" />
                </mx:VBox>

                <mx:Box>
                    <mx:Label text="50''" height="12" />
                    <mx:Text text="2x3 (1224mm x 3264mm)" height="12" />
                    <mx:Label text="WXGA (1360x768)" height="12" />
                    <mx:Label text="72 dpi" height="12" />
                    <mx:Label text="€ 101.000,00" height="12" />
                </mx:Box>

            </mx:HBox>
        </mx:HBox>
    </mx:VBox>
</mx:Canvas>

可能只是一些小问题，但我找不到它。

- Vinzcent

---

你尝试过从嵌入指令中删除scalegrid值并检查吗？ - user700284

@user700284 谢谢你的回复。是的，我试过了，但没有任何区别。 - Vinzcent

Answer 1

以下方法可以解决这个问题：

1. Remove the backgroundImage="{itemBackGround}" from the Canvas element of the itemRenderer

2. Add the following before the VBox in the itemRenderer class. I tested it out and it works fine:

   <mx:Canvas width="100%" height="100%" backgroundImage="{itemBackGround}" backgroundSize="100%"/>
   

如果您找到更好的方法，请更新您的问题以让我们知道。

Brian

- Drenai

Answer 2

你尝试过在列表(List)或者itemRenderer中设置alpha或backgroundAlpha属性吗？

我猜测列表(List)可能会在背景上绘制一些东西，或者阻止背景被绘制。不过要确定的话，你需要逐步调试代码。

- JeffryHouser

---

谢谢您的回复。如果我将List的backgroundAlpha设置为0，我就看不到背景图片了。所以我猜测列表会阻止背景被绘制。我怎样才能确定这一点呢？如何解决这个问题。谢谢！ - Vinzcent

@Vinzcent，你需要逐步查看框架代码，并尝试弄清楚itemRenderers的情况；它们是如何创建和初始化的。 - JeffryHouser

Answer 3

我没有尝试过这个，但看起来组件没有为每个渲染器创建多个实例/副本的图像

可能的解决方案是，在任何Singleton/Constant类中加载图像，例如在Model中，而不是在component/list中，并在component/list中使用Model的属性引用，即所有渲染器都只有一份副本。

希望这能解决问题。

- Imran