弹性：自定义ProgressBar酒吧的皮肤不会充满整个轨道

问题描述

| 我正在尝试为flex progressbar控件创建一个简单的外观。轨道和导条都应具有圆角，并且导条应在显示轨道的部分完全填充轨道。 这是我根据此示例创建的工具栏外观：

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<s:SparkSkin
    xmlns:fx=\"http://ns.adobe.com/mxml/2009\"
    xmlns:s=\"library://ns.adobe.com/flex/spark\" 
    xmlns:mx=\"library://ns.adobe.com/flex/mx\">

    <fx:Script>
    <![CDATA[
        override protected function initializationComplete():void {
            useChromeColor = true;
            super.initializationComplete();
        }
    ]]>
    </fx:Script>

    <s:Rect radiusX=\"5\" radiusY=\"5\" top=\"0\" left=\"0\" right=\"0\" bottom=\"0\">
        <s:fill>            
            <s:SolidColor color=\"#bb0203\" />
        </s:fill>
    </s:Rect>

</s:SparkSkin>

这是进度条声明：

<mx:ProgressBar id=\"progressBar\" name=\"progressBar\" top=\"40\" left=\"10\" width=\"480\" height=\"25\"
    label=\"\" labelWidth=\"0\"
    trackSkin=\"Skins.ProgressBar.TrackSkin\"
    barSkin=\"Skins.ProgressBar.BarSkin\" />

这是轨道皮肤：

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<s:SparkSkin
    xmlns:fx=\"http://ns.adobe.com/mxml/2009\"
    xmlns:s=\"library://ns.adobe.com/flex/spark\" 
    xmlns:mx=\"library://ns.adobe.com/flex/mx\"
    minHeight=\"25\">

    <fx:Script>
    <![CDATA[
        override protected function initializationComplete():void {
            useChromeColor = true;
            super.initializationComplete();
        }
    ]]>
    </fx:Script>

    <s:Rect width=\"100%\" height=\"100%\" radiusX=\"5\" radiusY=\"5\">
        <s:fill>            
            <s:SolidColor color=\"#d1d3d4\" />
        </s:fill>
    </s:Rect>

</s:SparkSkin>

不幸的是，它并没有达到预期的效果： 横条不是与轨道齐平，而是有边距，并且圆形的边框被切除了。 我该如何解决？     

解决方法

除了设置

barSkin

属性外，还将

maskSkin

属性设置为与

barSkin

相同的值： 您可以使用与代码中其他皮肤相同的方式来分配此皮肤：

<mx:ProgressBar id=\"progressBar\" name=\"progressBar\" top=\"40\" left=\"10\" width=\"480\" height=\"25\"
    label=\"\" labelWidth=\"0\"
    trackSkin=\"Skins.ProgressBar.TrackSkin\"
    maskSkin=\"Skins.ProgressBar.BarSkin\"
    barSkin=\"Skins.ProgressBar.BarSkin\" />