Flex：自定义 ProgressBar 栏皮肤不会填满整个轨道

Question

我正在尝试为 flex 进度条控件创建一个简单的皮肤。轨道和横杆都应该有圆角，并且横杆应该在显示的部分完全填满轨道。

这是我根据this example 创建的酒吧皮肤：

<?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>

不幸的是，它并没有达到预期的效果：

栏不是与轨道齐平，而是有一个边距，圆形边框被切断。

我该如何解决这个问题？

Answer 1

除了设置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" />