Question

如何在Flex 4中的TextInput组件上获得圆角半径。

<s:TextInput prompt="username" width="150" maxChars="100" id="txt_username"
    color="#000000"/>

Answer 1

创建自定义皮肤（可能通过复制spark TextInputSkin）并添加带圆角的边框图形，如下所示：

<!-- border -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0" 
        radiusX="10" radiusY="10">

    <s:stroke>
        <s:SolidColorStroke id="borderStroke" weight="1" />
    </s:stroke>
</s:Rect>

如果您想要更多特殊圆角，您还可以使用以下属性：

topLeftRadiusX="4" topLeftRadiusY="8" 
bottomLeftRadiusX="2" bottomRightRadiusY="10"

默认的TextInputSkin不允许使用圆角，因此您无法在TextInput上设置样式来执行此操作。所以，不，除了创建自定义皮肤类之外别无他法。

Answer 2

你可以更进一步，让它变得动态。基于spark TextInputSkin创建自定义TextInputSkin，并在updateDisplayList方法中将此代码添加到super.updateDisplayList（）调用之上。

在YourTextInputSkin.mxml中，

// in updateDisplayList()
if (getStyle("cornerRadius")!==undefined) {
    border.radiusX = border.radiusY = getStyle("cornerRadius");
    background.radiusX = background.radiusY = getStyle("cornerRadius");
}

就是这样。你完成了！

现在使用它添加一个CSS类选择器来添加一个cornerRadius样式，如下所示：

/* set the Textinput.styleName to this style */

s|TextInput.roundedInput
{
    contentBackgroundAlpha: .4;
    contentBackgroundColor: #000000;
    cornerRadius:           10;
    skinClass:              ClassReference("view.skins.TextInputRoundedSkin");  
}

并将您的实例设置为类，

<s:TextInput styleName="roundedInput"/>

不幸的是，您无法在MXML中的TextInput组件实例上设置cornerRadius样式。 Flex应该支持像HTML标签这样的东西的样式标签吗？是否应在Skin中声明的样式使用它们代理到组件？目前，如果您在Skin中声明了一个样式并试图在组件实例上使用它，Flex编译器会抛出错误，即使它在CSS中声明该样式和任何其他样式也是有效的。如果UIComponents有一个样式代理对象可以让你设置样式呢？无论如何，我离题了。

如果您想在TextInput实例上提供该样式以及之前的方法，您可以通过扩展TextInput并向其添加cornerRadius样式元数据来实现。您还可以设置skinClass（内联或在库中的defaults.css文件中）。

这样的事情：

<?xml version="1.0" encoding="utf-8"?>
<s:TextInput xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/mx"
             skinClass="TextInputRoundedSkin" >
    <fx:Metadata>
        [Style(name="cornerRadius", inherit="no", type="uint")]
    </fx:Metadata>
</s:TextInput>

使用，

<local:MyExtendedTextInput cornderRadius="8" />

将来你不必申报CSS。

如何在Flex 4 TextInput组件上使用cornerradius

2 个答案: