带有文本的 BorderContainer 未正确显示 buttonMode答案

【问题标题】：BorderContainer with text is not showing buttonMode correctly带有文本的 BorderContainer 未正确显示 buttonMode
【发布时间】：2012-12-18 22:39:53
【问题描述】：

在我的代码中，我有一个由数据提供者的项目组成的列表。列表的 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>

【问题讨论】：

标签： apache-flex

【解决方案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>

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

【讨论】：

谢谢，虽然我仍然需要 width 和 textAlign 属性，因为我有一些文本被分成两行。

【解决方案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>

【讨论】：

感谢您的回答，尽管我决定采用 RIAstar 提出的 Spark 解决方案。