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切片完成，但找不到任何示例。

提前致谢，斯托

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>

（我没有编译或试过这个，只编辑过一个例子。）

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

1 个答案: