使用自定义皮肤调整 Flex 火花控制的大小

Question

我在 Catalyst 中为 TextInput spark 控件制作了自定义皮肤。

问题在于，在 Flash Builder 的设计视图中，我无法使用应用的自定义外观调整 TextInput 控件的大小。我希望能够仅调整 TextInput 的长度，保持相同的字体度量和皮肤比例，因此我可以将相同的皮肤用于短、中和长 TextInput。

同样，在运行时，我想将控件停靠在父容器的右侧和/或底部，创建类似可调整大小的 Web 表单。

我为这个例子制作了一个丑陋但简单的 TextInput 皮肤：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009">
 <fx:Metadata>[HostComponent(spark.components.TextInput)]</fx:Metadata>
 <s:states>
      <s:State name="normal"/>
      <s:State name="disabled"/>
 </s:states>
 <s:Group x="0" y="0">
      <s:Rect height="31" radiusX="5" width="182" x="0.5" y="0.5">
           <s:stroke>
                <s:SolidColorStroke caps="none" color="#000000" joints="miter" miterLimit="4" weight="1"/>
           </s:stroke>
           <s:fill>
                <s:SolidColor color="#FF90CD"/>
           </s:fill>
      </s:Rect>
      <s:RichEditableText color="#2B4381" fontFamily="Arial" fontSize="12" tabStops="S0 S50 S100" x="11" y="11" width="161" heightInLines="1" id="textDisplay"/>
 </s:Group>
</s:Skin>

我的第一个想法是使用9-slicing完成，但找不到任何示例。

提前致谢， 佩塔尔

Answer 1

您需要将定位/大小从明确更改为相对于边缘，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009">
 <fx:Metadata>[HostComponent(spark.components.TextInput)]</fx:Metadata>
 <s:states>
      <s:State name="normal"/>
      <s:State name="disabled"/>
 </s:states>
 <s:Rect left="0" right="0" top="0" bottom="0">
      <s:stroke>
           <s:SolidColorStroke caps="none" color="#000000" joints="miter" miterLimit="4" weight="1"/>
      </s:stroke>
      <s:fill>
           <s:SolidColor color="#FF90CD"/>
      </s:fill>
 </s:Rect>
 <s:RichEditableText left="11" right="11" top="11" bottom="11" color="#2B4381" fontFamily="Arial" fontSize="12" tabStops="S0 S50 S100" heightInLines="1" id="textDisplay"/>
</s:Skin>

（我没有编译或尝试过这个，仅作为示例编辑。）