如何在flex 4.5 mobile中为textinput控件提供textinput外观

时间:2013-02-21 14:11:54

标签: actionscript-3 flex flex4 flex4.5

我创建了一个从TextInputSkin

扩展的类RoundedTextInputSkin
    package skins
{

    import assets.TextInput_389X35;

    import spark.skins.mobile.TextInputSkin;

    public class RoundedTextInputSkin extends TextInputSkin
    {

        public function RoundedTextInputSkin()
        {
            super();
            borderClass =  TextInput_389X35;
            layoutBorderSize = 5;
        } 
    }
}

现在我已将此皮肤作为skinClass提供给textInput控件。我能够看到roundedTextInput,但是在textinput中输入的文本是不可见的。 任何人都可以告诉我我的代码出了什么问题。

这是我的fxg文件

    <?xml version="1.0" encoding="utf-8" ?>
<Graphic version="2.0" ai:appVersion="16.0.0.682" ATE:version="1.0.0" flm:version="1.0.0" d:using="" xmlns="http://ns.adobe.com/fxg/2008" xmlns:ATE="http://ns.adobe.com/ate/2009" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:flm="http://ns.adobe.com/flame/2008">
      <Group x="3" y="1.35449" ai:seqID="1" flm:knockout="false">
        <Rect x="0.5" y="0.5" width="389" height="35" radiusX="16.9997" radiusY="16.9997" ai:seqID="2">
          <fill>
            <LinearGradient x="194.5" y="0.38916" scaleX="34.2022" rotation="90">
              <GradientEntry ratio="0" color="#B0B0B0"/>
              <GradientEntry ratio="1" color="#E0E0E0"/>
            </LinearGradient>
          </fill>
        </Rect>
        <Rect x="0.5" y="0.5" width="389" height="35" radiusX="16.9997" radiusY="16.9997" ai:seqID="3"/>
      </Group>
</Graphic>

1 个答案:

答案 0 :(得分:0)

您不清楚FXG文件与您展示的皮肤类的关系。但是,我将假设您提供的FXG是代码中引用的TextInput_389X35。我假设您的自定义边框位于所有其他元素之上;让它们看不见。根据TextSkinBase的createChildren()方法; border元素放在其他所有内容之上:

override protected function createChildren():void
{
 super.createChildren();
 if (!textDisplay)
 {
     textDisplay = StyleableTextField(createInFontContext(StyleableTextField));
     textDisplay.styleName = this;
     textDisplay.editable = true;
     textDisplay.useTightTextBounds = false;
     addChild(textDisplay);
 }

 if (!border)
 {
   border = new borderClass();
   addChild(border);
 }
}

默认的Border FXG元素使用路径创建边框,以便“填充”是边框。通过使用矩形,您可以在其他所有内容上放置一个大方块。