从itemrenderer访问布局数据

Question

I am working on a FLEX / AIR Spark list which lists a collection of images with differing width and height.

I am using a custom layout which works this way:

• decide how many images can be fit in the current row based on their widths.

• justify them in such a way that first image in the row obeys the "left" margin and the last image in the row obeys "right" margin, so with the "top" and "bottom" as specified by the user, let us say 10 pixels.

• As an example, assuming that the current row has 4 images, the images 1 & 4 will have 10 pixels each as "left" margin "right" margin respectively. But the left and right gaps between 1-2, 2-3 & 3-4 will be equally divided based on the varying widths.

• now i would like to draw a background that will fill the dynamic area. Please see the image below to get an idea:

Layout requirement Image

** In the image, The grey area is the background I would like to draw, and the colored rectangles represent images of differing widths and heights.**

• the "rowHeight" is variable based on the maximum height of individual images within the row.

Issues:

a) Now I would like to draw a background (see the grey area in the pic) that fills the background area of the list. I know the current item's width & height, but I don't know the rowHeight decided by the layout, left and right margins between the images.

Something like:

bgRect:Rectangle = new rectangle ( 0, 0, (imgWidth + (LeftMargin/2) + (Right Margin/2) ), rowHeight)

b) How / where should the background be implemented? if i add the BG area within the item renderer based on the layout, again the layout will be relaid.

Answer 1

Children should be added in the createChildren method. Drawing (painting) the background should happen in updateDisplayList method.

Answer 2

You can pass data to your itemrenderers via an itemrenderer factory. See - Flex - Sending a parameter to a custom ItemRenderer? .

var productRenderer:ClassFactory = new ClassFactory(ProductRenderer); productRenderer.properties = { showProductImage: true }; myList.itemRenderer = productRenderer;