无渐变的 Flex 按钮答案

【问题标题】：Flex button without gradient无渐变的 Flex 按钮
【发布时间】：2011-06-20 12:29:41
【问题描述】：

如何在 Flex (SDK 3.3) 中创建一个没有任何渐变或边框颜色的简单按钮？我的 CSS 如下所示。我仍然得到渐变和不同的边框颜色，我只想要一个普通的方形纯色按钮。

谢谢！

Button {
    fontWeight:normal;
    color:white;
    fillAlphas: 1, 1, 1, 1;
    fillColors: "0x0087B8", "0x0087B8","0x4A1870", "0x4A1870";
    cornerRadius: 0;
    focusAlpha: 1;
    borderColor:"0x0087B8";
    borderAlpha:1;
    textRollOverColor: white;

}

【问题讨论】：

只想说，如果你升级到 Flex 4 或更高版本； Spark Button 使用自定义皮肤让这一切变得非常容易。要删除渐变，您的填充颜色不应该都相同吗？
同意上面的 Flextras，填充颜色应该相同，一般来说在 Flex 3 中我会设置程序化皮肤，如果你想要非常精简的外观，只需进行简单的绘图和不害怕使用图形类进行一些绘图。 livedocs.adobe.com/flex/3/html/…

标签： apache-flex button gradient

【解决方案1】：

感谢您的意见，我必须创建一个这样的程序皮肤：

    public class TIMPButtonSkin extends ProgrammaticSkin
{
    public var backgroundFillColor:Number;
    public var lineThickness:Number;

    public function TIMPButtonSkin()
    {
        super();

    }

    override protected function updateDisplayList(w:Number, h:Number):void {

        var btn:Button = parent as Button;
        btn.buttonMode = true;

        switch (name) {
            case "upSkin":
                backgroundFillColor = 0x0087B8;
                break;
            case "overSkin":
                backgroundFillColor = 0x4A1870;
                break;
            case "downSkin":
                backgroundFillColor = 0x4A1870;
                break;
            case "disabledSkin":
                break;
        }

        // Draw the box using the new values.
        var g:Graphics = graphics;
        g.clear();
        g.beginFill(backgroundFillColor,1.0);
        g.lineStyle(lineThickness, 0xFF0000);
        g.drawRect(0, 0, w, h);
        g.endFill();
    }
}

CSS 如下所示：

Button {
fontWeight:normal;
color:white;
cornerRadius: 0;
textRollOverColor: white;
textSelectedColor:white;
skin: ClassReference("TIMP.TIMPButtonSkin");

}

【讨论】：