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

2023年8月7日 192次阅读

我有一个带有一堆自定义样式的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需要做很多工作.

任何想法我怎么能圆角？提前致谢！

最佳答案 列表组件(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 );
点赞