Question

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

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没有Alert组件，因此我使用相同的样式并添加了mx|Alert，但只有消息样式正常工作！标题和按钮样式被忽略！有人可以解释一下如何使它们工作吗？感谢。

Answer 1

标题和按钮样式适用于4.6 flex框架。如果你想改变bg：

，修复.alertButtonStyle并使用chromeColor

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

.alertTitleStyle类适用于titleTextField：UITextField;仅使用字体样式等样式。

Answer 2

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

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");*/


}

Spark中的警报样式

2 个答案: