为不可编辑的 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 选择器将此皮肤应用于所有 TextInput，如下所示：

.

@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 的元数据中声明。