0

我已经为此苦苦挣扎了几天，感觉很荒谬。这不是什么新鲜事，我似乎无法在任何地方找到答案。我有三个文件，所以这里有一些如何设置它们的示例片段。

查看器.mxml

<fx:Script>
<![CDATA[
  function changeColorState()
  {
    if(some condition is true)
    {
      myButton.colorState = TessaButton.PINK_COLORSTATE;
    }
    else
    {
      myButton.colorState = TessaButton.GRAY_COLORSTATE;
    }
  myButton.skin.setCurrentState('up');
  }
]]>
</fx:Script>
<s:VGroup>
  <TessaButton id="myButton"
               labelText="Example Button"
               click="doSomething(event)"
               skinClass="ButtonSkin" />
</s:VGroup>

泰莎按钮.mxml

<fx:Script>
<![CDATA[
  public static const PINK_COLORSTATE:String = 'Pink';
  public static const GRAY_COLORSTATE:String = 'Gray';

  public var colorState:String = PINK_COLORSTATE;//Default setting
]]>
</fx:Script>

按钮皮肤.mxml

<s:states>
  <s:State name="up" enterState="enterStateHandler(event)"/>
  <s:State name="down" />
  <s:State name="over" />
  <s:State name="disabled />
</s:states>

<fx:Script>
<![CDATA[
  //Pretend that these are all shades and tints of pink or gray, too lazy to make up examples
  public static const GE1_PINK_UP:uint = 0xffa2f7;
  public static const GE1_PINK_OVER:uint = 0xffa2f7;
  public static const GE1_PINK_DOWN:uint = 0xffa2f7;
  public static const GE2_PINK_UP:uint = 0xffa2f7;
  public static const GE2_PINK_OVER:uint = 0xffa2f7;
  public static const GE2_PINK_DOWN:uint = 0xffa2f7;

  public static const GE1_GRAY_UP:uint = 0xffa2f7;
  public static const GE1_GRAY_OVER:uint = 0xffa2f7;
  public static const GE1_GRAY_DOWN:uint = 0xffa2f7;
  public static const GE2_GRAY_UP:uint = 0xffa2f7;
  public static const GE2_GRAY_OVER:uint = 0xffa2f7;
  public static const GE2_GRAY_DOWN:uint = 0xffa2f7;

  private var fillColor1_up:uint = GE1_PINK_UP;//Default setting is pink
  private var fillColor1_over:uint = GE1_PINK_OVER;
  private var fillColor1_down:uint = GE1_PINK_DOWN;
  private var fillColor2_up:uint = GE2_PINK_UP;
  private var fillColor2_over:uint = GE2_PINK_OVER;
  private var fillColor2_down:uint = GE2_PINK_DOWN;

  private function enterStateHandler(e:FlexEvent):void
  {
    switch((hostComponent as ButtonProperties).colorState)
    {
      case 'Pink':
        fillColor1_up = GE1_PINK_UP;
        //And the rest set to the pink colors
        break;
      case 'Gray':
        fillColor1_up = GE1_GRAY_UP;
        //And the rest set to the gray colors
        break;
    }
]]>
</fx:Script>
<s:Rect id="fill">
  <s:fill>
    <s:LinearGradient rotation="90">
      <s:GradientEntry color.up="{fillColor1_up}"
                       color.over="{fillColor1_over}"
                       color.down="{fillColor1_down}" />
      <s:GradientEntry color.up="{fillColor2_up}"
                       color.over="{fillColor2_over}"
                       color.down="{fillColor2_down}" />
    </s:LinearGradient>
  </s:fill>
</s:Rect>

我的印象是，当填充颜色变量的值发生变化时，渐变条目中的这些颜色会动态变化。在这种情况下，当按钮上的状态更改为“向上”时，这些值会更改。默认情况下，这些按钮将显示为粉红色。如果我有任何条件为真，则 colorState 变量为灰色，因此按钮应为灰色。但是，在运行此程序时，我在 enterStateHandler 中看到的跟踪语句，我看到它们根据我的需要在灰色和粉红色之间正确变化，但它们在视觉上仍然是粉红色的。我不明白为什么。如果有人可以为我指出正确的方向，或者如果有人可以阐明为什么这不起作用，请告诉我。谢谢！

4

1 回答 1

0

您需要将可更改的颜色变量标记为“可绑定”。这告诉 Flex 密切关注这些值，并在它们发生变化时更新正在使用它们的任何其他内容（例如渐变）。

所以你需要：

[Bindable] private var fillColor1_up:uint = GE1_PINK_UP;
[Bindable] private var fillColor1_over:uint = GE1_PINK_OVER;
[Bindable] private var fillColor1_down:uint = GE1_PINK_DOWN;
[Bindable] private var fillColor2_up:uint = GE2_PINK_UP;
[Bindable] private var fillColor2_over:uint = GE2_PINK_OVER;
[Bindable] private var fillColor2_down:uint = GE2_PINK_DOWN;
于 2013-10-03T18:59:36.040 回答