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

Posted 2023-05-07

【中文标题】为不可编辑的 textinput 和 textarea flex 组件设置样式

【英文标题】：Set style for uneditable textinput and textarea flex components

【发布时间】：2013-01-12 01:48:48

【问题描述】：

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

谢谢

【问题讨论】：

请说明：Flex 3 还是 4？

【参考方案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 的元数据中声明。

【讨论】：

问题是，textinputs和area都是mx组件。我可以剥皮吗？

不，反正不是这样的。这就是为什么我问您的问题是关于 Flex 3 还是 4。您的问题确实应该更具体。