css - 在 Flex 4 中圆化 DateField 的 Angular ？

Question

我正在使用带有 flex 4 sdk 的 Flash 构建器，并尝试创建一个 DateField，其中 TextInput 组件具有圆 Angular 。

我已经尝试了以下不起作用的代码:

<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"
    xmlns:components="components.*">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace components "components.*";

        .roundedTI
        {
            corner-radius: 10;
            borderStyle: solid;   
        }

    </fx:Style>

    <mx:DateField textInputStyleName="roundedTI"/> 

</s:Application>

社区能否帮助我纠正我的代码中的任何可见错误，或者向我指出演示如何执行此操作的替代指南或教程？

Answer 1

有了 Flex 4，一切都在皮肤中。 CSS 主要用于将一种外观应用于组件或组件类，而在 Flex 3 中，它用于设置大量属性。然而，很酷的是，您可以在 CSS 中定义任意样式属性值，并且可以通过皮肤中的 getStyle 访问它!

因此，它们不再具有 cornerRadius 属性。相反，您必须创建一个“DateFieldSkin”，并通过 css 选择器将其应用于您的组件。默认的 DateField 外观使用 DropDownSkin。下面是解决这个问题的代码:

日期字段皮肤:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark">

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>

    <!--- @private -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0"
        radiusX="{getStyle('cornerRadius')}" radiusY="{getStyle('cornerRadius')}">
        <s:stroke>          
            <!--- @private -->
            <s:SolidColorStroke id="borderStroke" color="0x5380D0" />
        </s:stroke>
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgFill" color="0xFFFFFF"/>
        </s:fill>
    </s:Rect>
</s:Skin>

示例应用:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    minWidth="1024" minHeight="768">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        .roundedTI
        {
            corner-radius: 10;
            borderStyle: solid;
            borderSkin: ClassReference("DateFieldSkin");
        }

    </fx:Style>

    <mx:DateField textInputStyleName="roundedTI"/>

</s:Application>

您还可以将半径值硬编码到皮肤中，或者做一些更加动态和优化的事情。这只是一个开始。

如果可行，请告诉我， 兰斯