Spark 中的警报样式

Question

在 Flex 3 中，我为警报组件定义了以下样式：

Alert 
{
    messageStyleName: alertMessageStyle;
    titleStyleName: alertTitleStyle;
    buttonStyleName: alertButtonStyle;
}

.alertMessageStyle
{
    borderStyle: solid;
    borderAlpha: 0;
    roundedBottomCorners: true;
    cornerRadius: 9;
    headerHeight: 20;
    backgroundAlpha: 0.9;
    highlightAlphas: 0, 0;
    headerColors: #ffffff, #ffffff;
    backgroundColor: #ffffff;
    shadowDistance: 4;
    shadowDirection: right;
    dropShadowColor: #333333;
    color: #666666;
    textAlign: center;
    fontFamily: Arial;
    fontSize: 14;
    fontWeight: bold;
}

.alertTitleStyle
{
    color: #666666;
    backgroundColor: #ff0000;
    textAlign: center;
    fontFamily: Arial;
    fontSize: 13;
    fontWeight: bold;
}

.alertButtonStyle
{
    fontFamily: Arial;
    fontSize: 12;
    backgroundColor: #ff0000;
}

现在我正在迁移到 Flex 4 并且 Spark 没有警报组件，所以我使用相同的样式并添加了 mx|Alert，但只有消息样式有效！标题和按钮样式被忽略！ 有人可以解释一下如何让它们工作吗？谢谢。

Answer 1

标题和按钮样式适用于 4.6 flex 框架。修复 .alertButtonStyle 并使用 chromeColor 如果你想改变背景：

.alertButtonStyle
{
    fontFamily: Arial;
    fontSize: 12;
    chromeColor : #ff0000;
}

.alertTitleStyle 类申请titleTextField:UITextField;仅使用字体样式等样式。

Answer 2

您必须添加mx|Button 样式，它会自动添加到警报按钮。我正在使用此代码。

mx|Alert{
    borderColor: #0066cc;
    borderThicknessLeft: 3;
    borderThicknessTop: 1;
    borderThicknessBottom: 3;
    borderThicknessRight: 3;
    cornerRadius: 3;
    headerHeight: 30;
    backgroundAlpha: 1;
    highlightAlphas: 0.36, 0;
    headerColors: #003366, #0066cc;
    footerColors: #e7e7e7, #c7c7c7;
    backgroundColor: #ffffff;
    shadowDistance: 2;
    dropShadowColor: #333333;
    titleStyleName: "AlertTitle";
    color:#000000;
}

.AlertTitle {
    color: #ffffff;
    fontFamily: Arial;
    fontSize: 12;
    fontWeight: bold;
}

和按钮

mx|Button{
    fontFamily: Arial;
    fontSize: 11;
    fontWeight: bold;
    color: #333333;
    textRollOverColor: #444444;
    textSelectedColor: #000000;

    upSkin:Embed("assets/images/btn_common_n.jpg");
    downSkin:Embed("assets/images/btn_common_h.jpg");
    overSkin:Embed("assets/images/btn_common_h.jpg");
    skin:Embed("assets/images/btn_common_n.jpg");*/


}