禁用列表选择但保留子函数

发布于 2024-11-03 22:23:24 字数 4969 浏览 2 评论 0原文

我得到的是:带有数据提供者和自定义项目渲染器的列表。现在我的 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 列表中选择“文章”项。

i got a s:List with a dataprovider and a custom itemrenderer. now my itemrenderer has a button within.
Every time i choose a item from the list, i get focus on the item, but clicking the button within the item only causes the s:List to select the hole item and wont let me press the button within the item.

is there any solution to disable the "list" selection functionallity but keeping the items within the list enabled / clickable?

as requested, here the code (relevant parts)

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>

The error happens when clicking the button elements within the article ItemRenderer. Instead of clicking the button, the app selects the "article"-item from the categoy.mxml list.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

染墨丶若流云 2024-11-10 22:23:24

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

这能满足您的需要吗?

Do you need it to be a List? Can it just be a DataGroup instead? The key difference between a List and a DataGroup is that the List has items that are selectable. If you simply change your code to use a DataGroup, you will still get your item renderers, but loose the selectability.

Does that do what you need?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文