Flex Spark 列表可以具有 100% 宽度的项目渲染器吗？

Question

这对我来说很奇怪，但我也是 Spark 新手。我有一个带有 itemrenderer 的 List 类。如何让 itemrenderers 在它们之间划分列表宽度？通常，我认为这很简单，就像给渲染器提供百分比宽度一样，但这并不可行。有什么想法吗？

应用程序：

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

项目渲染器：

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

我认为您只是缺少布局本身的一些属性：

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

将 variableColumnWidth 设置为 true 并将 useVirtualLayout 设置为 false 应该可以解决您的问题。 RequestedColumnCount 和requestedMinColumnCount 默认设置为-1，但最好明确设置它们:)

我希望上面的代码有所帮助。