禁用列表选择但保留子功能

Question

我有一个 s:List 和一个 dataprovider 和一个自定义 itemrenderer。现在我的 itemrenderer 里面有一个按钮。 每次我从列表中选择一个项目时，我都会将注意力集中在该项目上，但单击项目内的按钮只会导致 s:List 选择孔项目并且不会让我按下项目内的按钮。

是否有任何解决方案可以禁用“列表”选择功能但保持列表中的项目启用/可点击？

根据要求，这里是代码（相关部分）

CategoryTree.mxml

<s:List id="data1" name="D1" x="-2000" height="100%" minWidth="600"
    width="{this.width}" dataProvider="{this.childrenResult1.lastResult}"
    itemRenderer="gui.components.Category">
    <s:layout>
        <s:VerticalLayout gap="10" clipAndEnableScrolling="true"
            variableRowHeight="true"></s:VerticalLayout>
    </s:layout>
</s:List>

Category.mxml

<s:ItemRenderer 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:ns="customNS" width="100%" minHeight="200" height="100%"
    maxHeight="410" autoDrawBackground="false" creationComplete="init()"
    updateComplete="update()">
    <s:layout>
        <s:HorizontalLayout gap="5" variableColumnWidth="true" />
    </s:layout>
    <s:Group height="100%" width="30">
        <s:BorderContainer depth="0" backgroundAlpha="0.1"
            backgroundAlpha.hovered="0.2" backgroundAlpha.selected="0.4"
            borderVisible="false" height="100%" width="20" buttonMode="true"
            useHandCursor="true" click="{this.previousCategory()}"
            horizontalCenter="0" />
        <ns:BackBtn depth="1" height="30" width="30" useHandCursor="true"
            buttonMode="true" click="{this.previousCategory()}" alpha="0.5"
            alpha.hovered="1" />
    </s:Group>
    <s:HGroup width="100%" height="100%" gap="10">
        <s:Label height="100%" maxHeight="100" maxDisplayedLines="-1"
            fontSize="20" rotation="-90" text="{data.name}" backgroundAlpha="0.6"
            backgroundColor="#6D6D6D" />
        <s:List id="category" height="100%" width="100%"
            itemRenderer="gui.components.ArticleSmall" 
            dataProvider="{this.articles}">
            <s:layout>
                <s:TileLayout clipAndEnableScrolling="false"
                    verticalGap="2" horizontalGap="5" 
                    columnAlign="justifyUsingGap"
                    rowAlign="top" verticalAlign="middle" />
            </s:layout>
        </s:List>
    </s:HGroup>
    <s:Group height="100%" width="30">
        <s:BorderContainer backgroundAlpha="0.1"
            backgroundAlpha.hovered="0.2" backgroundAlpha.selected="0.4"
            borderVisible="false" height="100%" width="20" buttonMode="true"
            useHandCursor="true" click="{this.nextCategory()}" 
            horizontalCenter="0" />
        <ns:BackBtn rotation="180" depth="1" height="30" width="30"
            useHandCursor="true" buttonMode="true" click="{this.nextCategory()}"
            alpha="0.5" alpha.hovered="1" />
    </s:Group>
</s:ItemRenderer>

Article.mxml

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    width="200" height="200" autoDrawBackground="false" depth="0"
    depth.hovered="1" creationComplete="init()">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
    <s:BorderContainer useHandCursor="true"
        backgroundAlpha="0" borderVisible="true" width="150" height="150"
        left="0" top="0" borderWeight="2">
        <mx:Image top="12.5" id="article_image" source="assets/dummy.png"
            autoLoad="true" width="100%" height="100%" x="0" scaleContent="true" />
        <mx:Text height="70%" width="100%" left="0.5" top="0.5" right="0.5"
            color="#000000" fontSize="10" text="{data.name}" />
        <mx:Text height="15" width="35%" bottom="0.5" left="0.5"
            color="#000000" fontSize="10" text="{data.prices.price() + '€'}" />
        <s:BorderContainer includeIn="hovered" x="0" y="0"
            width="146" height="146" borderVisible="false" backgroundAlpha="0.2"
            backgroundColor="#FFFFFF">
            <s:Button id="btn_add" height="25" width="25" label="Button"
                click="btn_add_clickHandler(event)" skinClass="gui.skins.CartAdd"
                bottom="2" right="29" />
            <s:Button id="btn_del" height="25" width="25" label="Button"
                click="btn_del_clickHandler(event)" skinClass="gui.skins.CartDel"
                bottom="2" right="2" />
        </s:BorderContainer>
    </s:BorderContainer>
</s:ItemRenderer>

点击文章ItemRenderer中的按钮元素时发生错误。应用程序从 categoy.mxml 列表中选择“文章”项，而不是单击按钮。

Answer 1

你需要它是一个列表吗？它可以只是一个数据组吗？ List 和 DataGroup 之间的主要区别在于 List 具有可选择的项目。如果您只是将代码更改为使用 DataGroup，您仍将获得您的项目渲染器，但会失去可选择性。

这能满足你的需要吗？