9.5.运行时定制样式
9.5.1.问题
你想在运行时定制组件所赋予的样式属性值。
9.5.2.解决办法
利用setStyle 方法重置样式属性值。
9.5.3.讨论
setStyle 方法继承自mx.core.UIComponent 的任意子类。你可以利用setStyle 在运行时对已定义的样式对属性进行赋值。setStyle 方法的参数分别是样式名称和期望的值。
尽管你能利用本地或外部样式表单在编译时定义组件样式, CSS 应该在实例化基础上利用styleName 属性查阅代码并且指定样式， setStyle 方法允许你在编译之后改变这些属性值。
下面的例子用setStyle 方法改变组件的颜色属性以响应Button 实例的点击事件：
在这些组件实例化的基础上，它们分别应用各自的样式：VBox 利用类型选择器制定样式，同时Label 通过styleName 属性指定.header 样式。按钮的click 事件处理器为VBox 和Label 实例的颜色样式属性应用新值。尽管本例证明了程序内部定义的样式属性被重载, 外部CSS 文件声明的样同样可以利用setStyle 方法在运行时被重载。
setStyle 方法尽管比运用样式表单的计算量开销大，却能方便你控制样式在运行时如何应用和改变。
你想在运行时定制组件所赋予的样式属性值。
9.5.2.解决办法
利用setStyle 方法重置样式属性值。
9.5.3.讨论
setStyle 方法继承自mx.core.UIComponent 的任意子类。你可以利用setStyle 在运行时对已定义的样式对属性进行赋值。setStyle 方法的参数分别是样式名称和期望的值。
+展开
-ActionScript
myContainer.setStyle( "backgroundColor", 0xFFFFFF );
尽管你能利用本地或外部样式表单在编译时定义组件样式, CSS 应该在实例化基础上利用styleName 属性查阅代码并且指定样式， setStyle 方法允许你在编译之后改变这些属性值。
下面的例子用setStyle 方法改变组件的颜色属性以响应Button 实例的点击事件：
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Style>
VBox {
backgroundColor: #CCCCCC;
verticalAlign: 'middle';
horizontalAlign: 'center';
}
.header {
font-family: 'Arial';
font-size: 15px;
font-weight: 'bold';
color: #FFFFFF;
}
</mx:Style>
<mx:Script>
<![CDATA[
// reset color properties with random values.
private function jumbleColors():void {
holder.setStyle( "backgroundColor" , getRandomColor() );
labelField.setStyle( "color" , getRandomColor() );
}
private function getRandomColor():uint {
return randomValue() << 16 ^ randomValue() << 8 ^ randomValue();
}
private function randomValue():Number {
return (Math.random() * 512) - 255;
}
]]>
</mx:Script>
<mx:VBox id="holder" width="200" height="200">
<mx:Label id="labelField" text="Hello Flex!"
styleName="header" />
<mx:Button label="jumble colors" click="jumbleColors();" />
</mx:VBox>
</mx:Application>
<mx:Style>
VBox {
backgroundColor: #CCCCCC;
verticalAlign: 'middle';
horizontalAlign: 'center';
}
.header {
font-family: 'Arial';
font-size: 15px;
font-weight: 'bold';
color: #FFFFFF;
}
</mx:Style>
<mx:Script>
<![CDATA[
// reset color properties with random values.
private function jumbleColors():void {
holder.setStyle( "backgroundColor" , getRandomColor() );
labelField.setStyle( "color" , getRandomColor() );
}
private function getRandomColor():uint {
return randomValue() << 16 ^ randomValue() << 8 ^ randomValue();
}
private function randomValue():Number {
return (Math.random() * 512) - 255;
}
]]>
</mx:Script>
<mx:VBox id="holder" width="200" height="200">
<mx:Label id="labelField" text="Hello Flex!"
styleName="header" />
<mx:Button label="jumble colors" click="jumbleColors();" />
</mx:VBox>
</mx:Application>
在这些组件实例化的基础上，它们分别应用各自的样式：VBox 利用类型选择器制定样式，同时Label 通过styleName 属性指定.header 样式。按钮的click 事件处理器为VBox 和Label 实例的颜色样式属性应用新值。尽管本例证明了程序内部定义的样式属性被重载, 外部CSS 文件声明的样同样可以利用setStyle 方法在运行时被重载。
setStyle 方法尽管比运用样式表单的计算量开销大，却能方便你控制样式在运行时如何应用和改变。
加支付宝好友偷能量挖...
