Flex Mobile - 突出显示项目渲染器中的选定行

Question

我正在构建一个 ItemRenderer，以显示公司可能希望在建筑物上执行的工作列表。然后，用户可以单击作业以选择它并使用父视图上的添加/编辑/删除按钮。

如何在我的 s:ItemRenderer 中突出显示选定的 HGroup 以允许用户查看当前选择的作业？

<s:Scroller width="100%" height="70%">
        <s:DataGroup width="100%" height="100%" 
                     horizontalCenter="0" verticalCenter="0" 
                     dataProvider="{Session.EXISTING_JOBS}"
                     >
            <s:layout >
                <s:VerticalLayout />                
            </s:layout>



            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer verticalCenter="0" horizontalCenter="0" width="100%">                                   

                        <fx:Script>
                            <![CDATA[


                                protected function jobSelect_clickHandler(event:MouseEvent):void
                                {
                                    // highlight the HGroup here
                                    if(this.selected == true){
                                        jobRow.setStyle('contentBackgroundColor',0x000000);
                                    } else {
                                        jobRow.setStyle('contentBackgroundColor',0xFFFFFF);
                                    }                                       
                                }
                            ]]>
                        </fx:Script>


                        <s:states>
                            <s:State name="normal"/>                            
                        </s:states>
                        <s:HGroup id="jobRow"
                            width="100%" height="50" 
                                  verticalAlign="middle"
                                  click="jobSelect_clickHandler(event)" >                               
                            <s:Label text="{data.id}" 
                                     width="15%" height="50" 
                                     verticalAlign="middle" 
                                     verticalCenter="0"/>       
                            <s:Label text="{data.company}" 
                                     width="35%" height="50"
                                     verticalAlign="middle"
                                     verticalCenter="0"/>
                            <s:Label text="{data.building}" 
                                     width="35%" height="50" 
                                     verticalAlign="middle"
                                     verticalCenter="0"/>   
                            <s:Label text="{data.assets}"
                                     width="15%" height="50"  
                                     verticalAlign="middle"
                                     verticalCenter="0"/>       
                        </s:HGroup>
                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>

        </s:DataGroup>
    </s:Scroller>

Answer 1

假设您在列表中使用 itemRenderer；默认情况下，List 类已经这样做了。您可以通过设置selectionColor style 来更改该值。

如果你真的想改变 HGroup 的值，你可以使用样式contentBackgroundColor。您可以通过访问 itemRenderer 实例的 selected 属性来判断您当前的渲染器是否是选定的项目。

    protected function selectJob_clickHandler(event:MouseEvent):void
    {
        // highlight the HGroup here
        if(this.selected == true){
          hgroupID.setStyle('contentBackgroundColor',0x000000);
        } else {
          hgroupID.setStyle('contentBackgroundColor',0xFFFFFF);
        }
    }

别忘了给 HGroup 添加一个 ID：

<s:HGroup id="hgroupID" 
          width="100%" height="50" 
          verticalAlign="middle"
          click="selectJob_clickHandler(event)" >