创建一个带有渐变的 Flex Panel 页眉答案

【问题标题】：Creating a Flex Panel header with a gradient创建一个带有渐变的 Flex Panel 页眉
【发布时间】：2009-08-01 00:09:15
【问题描述】：

我需要一个白色盒子（我使用面板，因为我离得很近，但它可以是任何东西）所有四个角都是圆形的，盒子的顶部需要有一个渐变，从一个开始颜色（比如说灰色）并最终作为背景颜色（白色）。渐变不会沿着整个框向下移动。

顶部的两个角必须保持圆形，因此渐变也必须填充那些圆形区域。

到目前为止，我有一个 mx:Panel 具有以下样式：

控制板 { 边框颜色：#ffffff；边界阿尔法：1；边框厚度：13；边界厚度左：0；边界厚度顶部：0；边界厚度底部：11；边界厚度右：0； roundedBottomCorners：真；角半径：16；标头高度：50；背景阿尔法：1； highlightAlphas: 0.29, 0; 标题颜色：#999999，#ffffff；背景颜色：#ffffff； dropShadowEnabled：假； }

如您所见，有一条细小的单像素线穿过标题。如果我能摆脱那条单像素线，那就完美了！我尝试将borderStyle 属性更改为“solid”，但仍然无法获得正确的样式组合来摆脱该行。

我也尝试过使用另一个带有背景图像的容器作为渐变，但圆角成为一个问题。

任何帮助将不胜感激！

【问题讨论】：

标签： apache-flex panel gradient

【解决方案1】：

标题栏下一行的罪魁祸首实际上是与Panel组件（mx.skins.halo.TitleBackground）关联的默认titleBackgroundSkin。如果您查看 updateDisplayList 方法的源代码，您会看到它绘制背景的部分，其中包括以下几行：

            g.lineStyle(0, colorDark, borderAlpha);
            g.moveTo(0, h);
            g.lineTo(w, h);
            g.lineStyle(0, 0, 0);

如果您创建自己的实现，除了这些行之外，其他所有内容都相同，您应该得到您需要的。至少我在有限的测试用例中使用了渐变标题。

【讨论】：

我看到sdk代码中的行没问题，但我不知道如何创建代码的新实现，并让flex使用那个新文件..我需要创建一个完全用我的新文件而不是旧文件从 Halo 复制的所有内容的新皮肤，并以某种方式将其链接到我的项目中？这不会大大增加我的 swf 大小吗？
哦，想通了，使用另一个答案：只在项目中创建新类，并使用（在 mxml 中）：titleBackgroundSkin="my.package.TitleBackground"

【解决方案2】：

以下 css 删除了该行，但阻止您使用渐变标题。

.richTextEditor
{
    titleBackgroundSkin: ClassReference("mx.skins.ProgrammaticSkin"); /** Gets rid of the line that was there **/
}

【讨论】：

这确实摆脱了线条，但也摆脱了标题渐变。 :\ 我可以在那个皮肤中设置渐变，虽然那会回到上面的原始解决方案，我很好奇是否有非编程皮肤解决方案。
啊，对不起。我只有这条线，想摆脱它。知道还是有用的，我想:)
@bmargulies I edited out 进攻部分
哈，我花了几分钟才弄清楚它有什么令人反感的地方。谢谢:)

【解决方案3】：

我没有找到上述特定 Panel 问题的解决方案，但我确实找到了适用于任何容器的整体解决方案：使用 bitmapFill 设置背景图像并圆角。

这对我有用（使用程序化皮肤）：

[styles.css]

盒子{ borderSkin: ClassReference("assets.programmatic.GradientHeaderSkin"); }

[GradientHeaderSkin.as]

包 assets.programmatic { 导入 flash.display.Bitmap；导入 flash.display.BitmapData；导入 mx.skins.ProgrammaticSkin；公共类 GradientHeaderSkin 扩展 ProgrammaticSkin { [嵌入(source="../imgs/panelHeaderGradient.png")] 私有变量_backgroundImageClass：类；私有变量 _backgroundBitmapData:BitmapData; 私有变量_backgroundImage：位图；私有变量 _backgroundColor:uint; 公共函数 GradientHeaderSkin() { 极好的（）; _backgroundImage = 新的 _backgroundImageClass(); _backgroundBitmapData = new BitmapData(_backgroundImage.width, _backgroundImage.height); } 覆盖受保护的函数 updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); _backgroundBitmapData.draw(_backgroundImage); 图形.clear(); graphics.beginBitmapFill(_backgroundBitmapData, null, false, false); // 这里指定圆角半径 this.graphics.drawRoundRectComplex(0, 0, this.width, this.height, 20, 20, 20, 20); } } }

这也是一个加载外部图像的示例： http://books.google.com/books?id=7fbhB_GlQEAC&pg=PA106&lpg=PA106&dq=flex+filling+rounded+corners+with+graphic&source=bl&ots=HU_jainH4F&sig=F793bjL0a4nU5wx5wq608h_ZPr0&hl=en&ei=GQd3Spi-OYiYMcLDyLEM&sa=X&oi=book_result&ct=result&resnum=1#v=onepage&q=&f=false

【讨论】：