带文本的BorderContainer没有正确显示buttonMode

Question

在我的代码中，我有一个由数据提供者的项目组成的列表。列表的itemRenderer包含一个BorderContainer，其中包含文本。我在滚动列表上模仿一排按钮。我希望光标在经过“按钮”时更改为手形光标，但指针只会在BorderContainer中未被文本覆盖的部分发生变化。

我已经为列表，BorderContainer和文本设置了buttonMode为true，那么为什么在传递文本时光标不会改变？

这是列表代码

<s:List id="listProject" width="100%" height="100%" horizontalScrollPolicy="off" allowMultipleSelection="false"
                        click="listProject_clickHandler(event)" itemRenderer="ProjectRenderer"
                        dataProvider="{listProjects}" creationComplete="listProject_creationCompleteHandler(event)" buttonMode="true">

这是渲染器

<?xml version="1.0" encoding="utf-8"?>
<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" 
            autoDrawBackground="true">

    <!--<s:Label text="{data.header}"/>-->
    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
        <s:State name="selected"/>
    </s:states>

    <!--<s:Image source.normal="{data.image1}" source.hovered="{data.image2}"/>-->

    <s:BorderContainer width="200" height="50" backgroundColor="{data.color}"
                   borderColor.selected="#FFFFFF" borderVisible.normal="false"
                   borderVisible.selected="true" borderWeight.selected="4" borderStyle.selected="inset" buttonMode="true">
        <s:layout>
            <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
        </s:layout>
        <mx:Text width="200" text="{data.header}" selectable="false"
                 color="#FFFFFF" fontSize="15" fontWeight="bold" leading="0" textAlign="center" buttonMode="true" useHandCursor="true"/>
    </s:BorderContainer>
</s:ItemRenderer>

Answer 1

只需使用Spark Label代替mx：Text就可以了。

此外，您的代码中存在一些冗余。我冒昧地将它修剪了一下：

<s:BorderContainer width="200" height="50" backgroundColor="{data.color}"
                   borderColor.selected="#FFFFFF" borderVisible.normal="false"
                   borderVisible.selected="true" borderWeight.selected="4"
                   borderStyle.selected="inset" buttonMode="true">

    <s:Label text="{data.label}" color="#FFFFFF" fontSize="15" fontWeight="bold"
             horizontalCenter="0" verticalCenter="0"/>
</s:BorderContainer>

这也将解决悬停或选择时文本的令人讨厌的跳跃感。

Answer 2

只要您不需要与mx：Text交互，就可以将其父级的mouseChildren属性设置为false。它将解决问题。这是一个简短的例子：

<s:ItemRenderer>
    <s:BorderContainer width="200" buttonMode="true" useHandCursor="true" mouseChildren="false">
        <mx:Text text="No many text" selectable="false" />                  
    </s:BorderContainer>
</s:ItemRenderer>