为不可编辑的文本输入和文本区域弹性组件设置样式

Question

有没有办法在 flex 程序中将"可编辑"属性设置为 false 的情况下更改所有文本输入和文本区域组件的样式（背景颜色）？

谢谢

Answer 1

创建自定义皮肤

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

• 为文本输入创建自定义外观。首先创建一个新的 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 选择器将此外观应用于所有文本输入，如下所示：

.

@namespace s "library://ns.adobe.com/flex/spark";
s|TextInput {
    skinClass: ClassReference("my.skins.MyTextInputSkin");
}

• 对文本区域组件重复此操作

<小时 />

使其更通用

您可以通过执行以下操作来使其更通用.
在 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;
}

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