list - Spark List ItemRenderer 选择状态问题

Question

one issue is that even set requireSelection to false, in the List, when select all items, The List still has one item be selectedAndShowsCaret. 对于此示例，悬停颜色为黄色，选定颜色为红色，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);
        }