9.5.運(yùn)行時(shí)定制樣式

2024-04-27 13:52:06

字體：大中小

供稿：網(wǎng)友

9.5.1.問題
你想在運(yùn)行時(shí)定制組件所賦予的樣式屬性值。
9.5.2.解決辦法
利用setStyle 方法重置樣式屬性值。
9.5.3.討論
setStyle 方法繼承自mx.core.UIComponent 的任意子類。你可以利用setStyle 在運(yùn)行時(shí)對已定義的樣式對屬性進(jìn)行賦值。setStyle 方法的參數(shù)分別是樣式名稱和期望的值。

-ActionScript

myContainer.setStyle( "backgroundColor", 0xFFFFFF );

盡管你能利用本地或外部樣式表單在編譯時(shí)定義組件樣式, CSS 應(yīng)該在實(shí)例化基礎(chǔ)上利用styleName 屬性查閱代碼并且指定樣式， setStyle 方法允許你在編譯之后改變這些屬性值。

下面的例子用setStyle 方法改變組件的顏色屬性以響應(yīng)Button 實(shí)例的點(diǎn)擊事件：

-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>