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>
不幸的是，它没有达到预期的效果：
< img src="https://i.sstatic.net/txMJe.png" alt="bad fill screen shot">
栏不是与轨道齐平，而是有一个边距，并且圆形边框被切断。
我该如何解决这个问题？
I'm trying to create a simple skin for the flex progressbar control. Both the track and the bar should have rounded corners, and the bar should fill the track completely in the parts where it is being shown.
Here is the bar skin I've created based off 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>
Here is the progress bar declaration:
<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" />
And here is the track skin:
<?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>
Unfortunately, it doesn't have quite the desired effect:
Instead of the bar being flush with the track, there's a margin, and the rounded border gets cut off.
How do I fix this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
除了设置
barSkin属性之外，还将maskSkin属性设置为与barSkin相同的值：您可以像其他皮肤一样分配此皮肤在你的代码中：
In addition to setting the
barSkinproperty, set themaskSkinproperty to the same value asbarSkin:You can assign this skin the same way as others in your code: