Can a Flex Spark List have itemrenderers that are 100% width?
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>
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.
精彩评论