Spark List ItemRenderer选择状态问题

Question

一个问题是，即使将 requireSelection 设置为false，在列表中，当选择所有项目时，列表仍然有一个项目被选中，并且会被选中。对于此示例，悬停颜色为黄色，所选颜色为红色，selectedAndShowsCaret为蓝色。

另一个问题是将 selectedIndices 设置为空， selectedItems 仍然无法更新。以下有3项，当取消选中selectAll复选框时， selectedItems.length仍为3。

以下是代码：

<?xml version="1.0" encoding="utf-8"?>

<s:Application

    xmlns:fx="http://ns.adobe.com/mxml/2009"

    xmlns:s="library://ns.adobe.com/flex/spark"

    xmlns:mx="library://ns.adobe.com/flex/mx"

    xmlns:components="components.*"

    creationComplete="init()"

    >

    <fx:Script>

        <![CDATA[

            import mx.collections.ArrayCollection;
            [Bindable]
            private var _dataProvider:ArrayCollection;

            private function init():void {
                generateList();
            }

            private function generateList():void {
                var items:Array = [];

                for (var i:int = 0; i<3; i++) {
                    items.push(i);
                }

                _dataProvider = new ArrayCollection(items);

            }

            private function selectAllChange():void {

                var selected:Boolean = selectAll.selected;

                var result:Vector.<int> = new Vector.<int>();

                var count:int = _dataProvider.length;

                for (var i:int = 0; i< count; i++) {

                    result[i] = i;

                }

                selected ? list.selectedIndices = result : list.selectedIndices = new Vector.<int>();

                //NOTE: when all the items is selected, the selectedItems is still empty

                trace(list.selectedItems.length);

            }

        ]]>

    </fx:Script>

    <s:layout>

        <s:VerticalLayout horizontalAlign="center"/>

    </s:layout>

    <s:CheckBox id="selectAll" label="Select All" change="selectAllChange()"/>

    <components:CustomerList

        id="list"

        borderColor="#000000"

        contentBackgroundColor="#cccccc"

        requireSelection="false"

        dataProvider="{_dataProvider}"

        allowMultipleSelection="true"

        itemRenderer="components.itemRenderer.DemoItemRenderer"

        >

        <components:layout>

            <s:VerticalLayout paddingLeft="10" paddingRight="10"/>

        </components:layout>

    </components:CustomerList>

</s:Application>

DemoItemRenderer：

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                xmlns:s="library://ns.adobe.com/flex/spark"

                width="50" height="100"

                autoDrawBackground="false"

                >

    <s:states>

        <s:State name="normal" />

        <s:State name="hovered" />

        <s:State name="selected" />

        <s:State name="dragging"/>

        <s:State name="normalAndShowsCaret" stateGroups="caret" />

        <s:State name="hoveredAndShowsCaret" stateGroups="caret" />

        <s:State name="selectedAndShowsCaret" stateGroups="caret" />

    </s:states>



    <fx:Script>

        <![CDATA[

            override public function set data(value:Object):void {
                super.data = value;
                if (data == null){
                    return;
                }
                txt.text = String(data);
            }

            override protected function getCurrentRendererState():String {

                currentState = super.getCurrentRendererState();

                trace(currentState);

                return super.getCurrentRendererState();
            }
        ]]>

    </fx:Script>

    <!--selected: red, selectedAndShowsCaret: blue, hovered: yellow-->

    <s:Rect width="100%" height="100%" includeIn="selected, selectedAndShowsCaret">
        <s:fill>
            <s:SolidColor color.selected="#ff0000" color.selectedAndShowsCaret="#00ffff"/>
        </s:fill>
    </s:Rect>

    <s:Rect width="100%" height="100%" includeIn="hovered">
        <s:fill>
            <s:SolidColor color="#ffff00"/>
        </s:fill>
    </s:Rect>

    <s:Label color="#000000" id="txt" horizontalCenter="0" verticalCenter="0" visible.dragging="false"/>

</s:ItemRenderer>

Answer 1

对于第二个问题，这个selectAll（）函数适用于我：

        protected function selectAll():void{

            if(select.selected){                    
                var indexVector:Vector.<int> = new Vector.<int>();
                for(var i:int= 0; i<list.dataProvider.length;i++ )
                {           
                    indexVector.push(i);
                }                   


                list.selectedIndices = indexArray;
                list.addEventListener(FlexEvent.UPDATE_COMPLETE, list_updateCompleteHandler);


            } else {
                list.selectedIndex = -1;
                list.addEventListener(FlexEvent.UPDATE_COMPLETE, list_updateCompleteHandler);

            }


        }

        private function list_updateCompleteHandler(event:FlexEvent):void{
            list.removeEventListener(FlexEvent.UPDATE_COMPLETE, list_updateCompleteHandler);
            trace(list.selectedItems);
        }