9.9.同一个程序中使用多个主题

2024-04-27 13:52:06

字体：大中小

来源：转载

供稿：网友

9.9.1.问题
你想在同一程序中利用多个主题颜色以区分控件。
9.9.2.解决办法
运用容器的themeColor 属性来规定相应的彩色值。
9.9.3.讨论
你能利用<mx:Canvas>的themeColor 属性在同一程序中为控件指派不止一个Flex 主题。运用主题颜色可以改变在滚动、选择等相似的视图处理时被操作控件的外观。

本招的例子向<mx:Canvas> 窗口添加三个子组件来显示三个主题的外貌。Flex 程序的默认主题颜色在框架中defaults.css 的全局样式声明中被设为haloBlue, 但是还有很多可用只要你喜欢就可用。

首先创造数据提供器dp，允许其可绑定。其次声明三个包含了themeColor 属性将被设置的组件的Canvas 实例。再对每个Canvas 实例的mx.controls.ComboBox 和mx.controls.DataGrid 子组件运用相同的dp 数据提供器。注视：

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="636" height="241">
<mx:Script>
<![CDATA[
[Bindable]
private var dp:Array = [{label:'Carole King', Album:'Tapestry',:1},{label:'Paul Simon', data:2},{label:'Original Cast', data:3},{label:'The Beatles', data:4}];

]]>
</mx:Script>
<mx:Label x="10" y="7" text="Standard Theme" fontWeight="bold" color="#ffffff"/>
<mx:Label x="218" y="7" text="Green Theme" fontWeight="bold" color="#ffffff"/>
<mx:Label x="426" y="7" text="Silver Theme" fontWeight="bold" color="#ffffff"/>
<mx:Canvas x="10" width="200" height="200" verticalCenter="10.5">
<mx:ComboBox x="10" y="10" dataProvider="{dp}" width="180">
</mx:ComboBox>
<mx:DataGrid x="10" y="40" width="180" height="120" dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn headerText="Id" dataField="data" width="30" />
<mx:DataGridColumn headerText="Artist" dataField="label" />
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="168" label="Button"/>
</mx:Canvas>
<mx:Canvas x="426" width="200" height="200" themeColor="haloSilver" verticalCenter="10.5"
backgroundColor="#ffffff" cornerRadius="8" borderStyle="solid">
<mx:ComboBox x="10" y="10" dataProvider="{dp}" width="180">
</mx:ComboBox>
<mx:DataGrid x="10" y="40" width="180" height="120" dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn headerText="Id" dataField="data" width="30" />
<mx:DataGridColumn headerText="Artist" dataField="label" />
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="166" label="Button"/>
</mx:Canvas>
<mx:Canvas x="218" width="200" height="200" themeColor="haloGreen" verticalCenter="10.5" backgroundColor="#ffffff" cornerRadius="8" borderStyle="solid" alpha="0.5">
<mx:ComboBox x="10" y="10" dataProvider="{dp}" width="180">
</mx:ComboBox>
<mx:DataGrid x="10" y="40" width="180" height="120" dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn headerText="Id" dataField="data" width="30" />
<mx:DataGridColumn headerText="Artist" dataField="label" />
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="166" label="Button"/>
</mx:Canvas>
</mx:Application>