Question

This is an odd one for me but I am also new to Spark. I have a List class with an itemrenderer. How can I get the itemrenderers to divide the List width between them? Normally, I would think this would be a easy as giving the renderers a percent width but that no worky. Any ideas?

Application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    minHeight="600"
    minWidth="955"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
    <s:ArrayCollection id="dta">
        <fx:Object 
                label="one" />
        <fx:Object 
                label="two" />
        <fx:Object 
                label="three" />
        <fx:Object 
                label="four" />
    </s:ArrayCollection>
</fx:Declarations>

<s:List 
        width="100%"
        borderColor="red"
        dataProvider="{dta}"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        itemRenderer="ProgressIndicatorItemRenderer">

    <s:layout>
        <s:HorizontalLayout gap="0" />
    </s:layout>
</s:List>
</s:Application>

Itemrenderer:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer 
    width="100%"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    autoDrawBackground="false"
    showsCaret="false">

<s:states>
    <s:State name="normal" />
    <s:State name="selected" />
    <s:State name="done" />
</s:states>

<s:Rect id="progressIndicatorBackground"
        left="0" right="0" top="0" bottom="0">
    <s:fill>
        <s:SolidColor 
                color.done="0xCCCCCC"
                color.normal="0xCCCCCC"
                color.selected="0xF6A139"
                alpha="1" />
    </s:fill>
</s:Rect>

<s:Label 
        width="100%"
        text="{data.label}" />

 </s:ItemRenderer>

Answer 1

I think you are just missing some properties on the layout itself:

<s:List width="100%" useVirtualLayout="false" borderColor="red" dataProvider="{ dta }"
    itemRenderer="ProgressIndicatorItemRenderer">

    <s:layout>
        <s:HorizontalLayout gap="0" requestedColumnCount="-1" requestedMinColumnCount="-1" variableColumnWidth="true" />
    </s:layout>

</s:List>

Setting the variableColumnWidth to true and useVirtualLayout to false should resolve your problem. RequestedColumnCount and requestedMinColumnCount are set to -1 by default but it’s good to set them explicitly 🙂

I hope the code above helps.