更改列表项渲染取决于视图状态

Question

我有一个列表，该项目呈现如下：链接。 但现在我需要启用或禁用删除按钮取决于我的列表所在的视图状态。

这是我的视图（包含列表）：

<s:states>
    <s:State name="main" />             <!-- Navigation.CART_MAIN  -->
    <s:State name="cash" />             <!-- Navigation.CART_CASH  -->
    <s:State name="credit" />           <!-- Navigation.CART_CREDIT  -->
</s:states>
    <s:List id="theList"
            width="480" height="240"
            x="69" y="82"
            dataProvider="{model.products}"
            useVirtualLayout="false"
            itemRenderer="com.png.vm.ui.components.ProductCartThumbnail" >

    </s:List>

问题是我只想在屏幕使用状态“main”时启用 itemRender 内的删除按钮

Answer 1

另一种选择是创建单独的 itemRenderer 并使用 itemRendererFunction。

我从之前提出的类似问题中获取了这个示例，并对其进行了一些修改以满足您的需求：

flex 4 list ItemRenderer：我如何为不同的行拥有不同的itemrenderers？

<fx:Script>
    <![CDATA[
        import renderers.*;

        import mx.core.ClassFactory;
        import spark.skins.default.DefaultItemRenderer;

        private function list_itemRendererFunc(item:Object):ClassFactory {
            var cla:Class = MainItemRenderer;
            switch (currentState) {
                case "main":
                    cla = MainItemRenderer;
                    break;
                default:
                    cla = CashCreditItemRenderer;
                    break;
            }
            return new ClassFactory(cla);
        }
    ]]>
</fx:Script>

<s:List id="theList"
        x="69" y="82"
        itemRendererFunction="list_itemRendererFunc"
        dataProvider="{model.products}"
        useVirtualLayout="false">

编辑：
这是使用的另一种解决方案。您可以通过为每个状态声明不同的属性值来指定不同的 itemRenderer。

<s:List id="theList" 
        width="393" height="223" 
        x="42" y="69" 
        dataProvider="{model.products}" 
        useVirtualLayout="false" 
        itemRenderer.main="com.png.vm.ui.components.ProductCartThumbnail" 
        itemRenderer="com.png.vm.ui.components.ProductCartThumbnailReadOnly">

Answer 2

我遇到了完全相同的问题。

我注入了模型状态（例如 modelState），它确定渲染器类中按钮的状态。

<s:ItemRenderer>
    <fx:Script>
        <![CDATA[
                import spark.components.List;

                [Bindable]
                public var modelState:String;

                public function deleteItem():void {
                    var parentList:List = owner as List;
                    // remove the item
                    parentList.dataProvider.removeItemAt(parentList.dataProvider.getItemIndex(data))
                }
            ]]>
        </fx:Script>
        <s:HGroup>
            <s:Label text="{data}" />
            <s:Button id="remove" label="X"  click="deleteItem()" 
                      enable="{modelState=='main'}"/>
        </s:HGroup>
</s:ItemRenderer>

是的，我知道这不是最好的决定！