Question

给定一个基于SkinnableContainer的自定义组件，如何在运行时在皮肤中设置值？具体来说，它是一个白板组件，其maxWidth和maxHeight值表示对话中所有白板的最小共享宽度/高度。

[Bindable]
public var maxWhiteBoardWidth:Number;
[Bindable]
public var maxWhiteBoardHeight:Number;

这些值用于使用皮肤中的描边线在对话中的所有较大白板的表面上绘制指南：

<!-- smallest common denominator boundaries -->
<s:Line left="300" top="0" bottom="0">
    <s:stroke>
        <s:SolidColorStroke weight="1" color="0xFFFFFF" />
    </s:stroke>
</s:Line>

<s:Line top="300" left="0"  right="0">
    <s:stroke>
        <s:SolidColorStroke weight="1" color="0xFFFFFF" />
    </s:stroke>
</s:Line>

top的{{1}}和left属性中的值300不应该硬编码到皮肤中。它们应该反映组件中maxWhiteBoardWidth / maxWhiteBoardHeight的变化值。

我使用MXML中的s:Line属性设置皮肤。我需要动态加载皮肤吗？如果是这样的话/在生命周期中如何？

我最近来自Flex 3，因此Spark皮肤架构仍然有点模糊。感谢。

Answer 1

尝试：

<s:Line left="{hostComponent.maxWhiteBoardWidth}" top="0" bottom="0">
  ...
</s:Line>
<s:Line top="{hostComponent.maxWhiteBoardHeight}" left="0"  right="0">
  ...
</s:Line>

并确保您拥有元数据指令：

<fx:Metadata>
      <!-- Specify the component that uses this skin class. -->
      [HostComponent("my.component.MyComponent")]
</fx:Metadata>

否则组件上的自定义属性将不会正确暴露在皮肤上。

Flex 4，从组件中设置组件外观中的变量

1 个答案: