在 Flex 中重绘/刷新自定义皮肤答案

【问题标题】：Redrawing/refreshing Custom Skin in Flex在 Flex 中重绘/刷新自定义皮肤
【发布时间】：2012-01-12 00:27:42
【问题描述】：

所以我创建了一个自定义切换按钮来包含属性 currentValue:int

这样我就可以做到以下...

<fx:Script>
    protected var currentValue:int = 0;
    protected function changeValue(x:int):void{
        currentValue = x;
    }
</fx:Script>

<MyToggleButton currentValue="{updatedValue}" styleName="MyToggleStyle" click="changeValue(1)" id="first"/>
<MyToggleButton currentValue="{updatedValue}"  styleName="MyToggleStyle" click="changeValue(2)" id="second"/>

这个脚本的想法是根据 currentValue 的变化来改变切换按钮的外观。我如何每次刷新我的切换按钮，以便可以根据“currentValue”的变化更新样式？

附： MyToggleStyle 将引用一个用 mxml 编写的 Skin 类，该类将使用 getStyle("currentValue") 来获取对 currentValue 的更改

【问题讨论】：

标签： apache-flex skin

【解决方案1】：

如果currentValue 属性只会影响皮肤图形，并且您有一些预定义的“外观”，那么您应该创建一个带有状态的皮肤。（见spark.skins.spark.CheckBoxSkin 一个很好的例子。）

在 MyToggleButton 中：

public function set currentValue(value:int):void {
   _currentValue = value;
   invalidateSkinState();
}

protected override function getCurrentSkinState():String {
   return _currentValue == 9 ? "someStateName" : "otherState";
}

每当currentValue 更改时，这将使您的皮肤状态无效，Flex 将自动调用getCurrentSkinState() 以确定您的皮肤的新状态。然后，您可以在皮肤中使用includeIn、条件属性等来确定其外观。

如果您想在皮肤中将currentValue 显示为文本，您应该查看皮肤部件。这些基本上是您的组件定义的插槽，然后皮肤“填充”一个组件，例如作为标签。例如，标准火花按钮上的标签是labelDisplay 皮肤部件。组件可以直接在 this 上设置文本，但实际创建它取决于皮肤。

附：在您的示例代码中，您还需要在 currentValue 上使用 [Bindable]。

【讨论】：