设置不可编辑的textinput和textarea flex组件的样式

Question

有没有办法在'editable'属性设置为false的情况下更改flex程序中所有textinput和textarea组件的样式（背景颜色）？

由于

Answer 1

创建自定义皮肤

由于没有特定的样式，您必须创建自定义外观。只需按照以下步骤操作：

• 为TextInput创建自定义外观。首先创建一个新的mxml文件（例如名为MyTextInputSkin.mxml）。现在最简单的方法是将spark.skins.spark.TextInputSkin中的所有代码复制到新类中。
• 重写updateDisplayList()方法，并根据主机组件的editable属性对皮肤类应用必要的更改。例如：

override protected function updateDisplayList(
    unscaledWidth:Number, unscaledHeight:Number):void {

    super.updateDisplayList(unscaledWidth, unscaledHeight);
    //when editable the background will be red and otherwise it'll be blue
    background.color = hostComponent.editable ? 0xff0000 : 0x0000ff;
}

• 通过CSS选择器将此外观应用于所有TextInputs，如下所示：

@namespace s "library://ns.adobe.com/flex/spark";

s|TextInput {
    skinClass: ClassReference("my.skins.MyTextInputSkin");
}

• 重复TextArea组件

---

使其更通用

你可以通过做以下事情来使其更具通用性 在updateDisplayList（）方法中：

override protected function updateDisplayList(
    unscaledWidth:Number, unscaledHeight:Number):void {

    super.updateDisplayList(unscaledWidth, unscaledHeight);

    var bgColorStyle:String = "backgroundColor";
    if (!hostComponent.editable) = "nonEditableBackgroundColor";
    background.color = getStyle(bgColorStyle);
}

在CSS中：

@namespace s "library://ns.adobe.com/flex/spark";

s|TextInput {
    skinClass: ClassReference("my.skins.MyTextInputSkin");
    backGroundColor: #ff0000;
    nonEditableBackgroundColor: #0000ff;
}

通过这种方式，您可以在任何地方重复使用自定义皮肤，并通过样式应用不同的颜色 请注意，您将无法通过MXML设置nonEditableBackgroundColor，因为主机组件的元数据中没有声明该样式。这不适用于backGroundColor，因为它是默认样式，并在TextInput的元数据中声明。