Question

我有一个带有一堆自定义样式的mx.components.List组件：

<mx:Style>
    .dropDownListStyle
    {
        border-style: solid;
        corner-radius: 4;
    }
</mx:Style>

我正在AS中创建列表：

_dropDown = new List();
...
_dropDown.styleName = "dropDownListStyle";

然后将列表添加为PopUpManager的弹出窗口：

PopUpManager.addPopUp( _dropDown, this );

问题是新创建的弹出窗口的边角未圆化。我发现需要边框样式才能获得效果，但添加此属性并没有帮助。我正在使用Flex 4.1构建项目，但List及其父项是MX组件，将它们迁移到Spark需要做很多工作。

任何想法我怎样才能圆角？提前谢谢！

Answer 1

列表组件（mx或spark都没有）定义了角半径样式。您应该考虑覆盖列表组件，实现该样式或更简单的方法，将没有任何边框的列表放入可以设置其角半径的容器中，并弹出该组件：

/*Box, Canvas, Group...*/
.dropDownListHolderStyle { 
    corner-radius: 4;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    border-style: solid;
    border-weight: 1;
    padding-bottom: 2;
    padding-top: 2;
    padding-left: 2;
    padding-right: 2;
}
/*List*/
.dropDownListStyle {
    background-color: #FFFFFF;
}

和组件：

<s:VGroup id='_dropDownPopup' styleName='dropDownListHolderStyle' [...]>
    <s:List id='_dropDown' styleName='dropDownListStyle' [...] />
</s:VGroup>

[...]

PopUpManager.addPopUp( _dropDownPopup, this );

Answer 2

我使用的是cornerRadius样式属性而不是corner-radius，也许你拼错了吗？但我只做Spark，所以它可能不适合你的情况。

如何正确设置MX列表的角半径并获得圆角？

2 个答案: