[英]change background color of RadioButton in flex
我有一個flex的單選按鈕,想要將其文本的背景顏色更改為某種顏色,但我沒有找到任何解決此問題的方法。
編輯:注意:我想要一些(不是全部)單選按鈕與單選按鈕組中的某些條件,具有不同的顏色
這有什么解決方案嗎?
編輯:我的項目的代碼
MyItemRenderer.mxml
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" dataChange="onDataChange()" >
<fx:Script><![CDATA[
import avmplus.constantXml;
import ir.fanap.bizint.ui.flex.event.MyAdvancedListEvent;
import ir.fanap.bizint.ui.flex.skin.MyRadioButtonSkin;
import mx.core.UIComponent;
private function onDataChange():void {
changeColorForMultiCube();
}
private function changeColorForMultiCube():void {
if (data['color'] != null ) {
box.setStyle("skinClass","MySkin");
}
else{
box.setStyle("SkinClass","RadioButtonSkin");//default skin for radio button
}
}
]]></fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:RadioButton id="box" change="onDataChange()"/>
</s:ItemRenderer>
MySkin.mxml:
<?xml version="1.0" encoding="utf-8"?>
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.RadioButton")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
/* Define the skin elements that should not be colorized.
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay", "dot"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/* Define the symbol fill items that should be colored by the "symbolColor" style. */
static private const symbols:Array = ["dotFill"];
/**
* @private
*/
override public function get symbolItems():Array {return symbols};
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>
<fx:Script>
<![CDATA[
/**
* @private
*/
private static const focusExclusions:Array = ["labelDisplay"];
/**
* @private
*/
override public function get focusSkinExclusions():Array { return focusExclusions;};
]]>
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" stateGroups="overStates" />
<s:State name="down" stateGroups="downStates" />
<s:State name="disabled" stateGroups="disabledStates" />
<s:State name="upAndSelected" stateGroups="selectedStates" />
<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
<s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
</s:states>
<s:Rect width="{labelDisplay.width}" height="{labelDisplay.height}" left="18" right="0" top="3" bottom="3" verticalCenter="2">
<s:fill>
<s:SolidColor color="0xDAC1C3" />
</s:fill>
</s:Rect>
<s:Label id="labelDisplay"
textAlign="start"
verticalAlign="middle"
maxDisplayedLines="1"
left="18" right="0" top="3" bottom="3" verticalCenter="2" />
</s:SparkSkin>
我不了解Flex 3,但在Flex 4中,它可以通過以下方式完成。
1)使用HostComponent創建一個MXML外觀作為spark.components.RadioButton
。 2)在單選按鈕的labelDisplay
之前創建一個圖形Rect
,它與labelDisplay
具有相同的尺寸和位置。
<s:Rect width="{labelDisplay.width}" height="{labelDisplay.height}" left="18" right="0" top="3" bottom="3" verticalCenter="2">
<s:fill>
<s:SolidColor color="0xDAC1C3" />
</s:fill>
</s:Rect>
<s:Label id="labelDisplay"
textAlign="start"
verticalAlign="middle"
maxDisplayedLines="1"
left="18" right="0" top="3" bottom="3" verticalCenter="2" />
3)在Application中創建的Spark RadioButton
使用此外觀。
<s:RadioButton id="rdo" label="Programming in Actionscript" fontSize="20" x="100" y="100" skinClass="skinRdoBtn"/>
在這里,我再次發布答案,以方便您。 但是我會要求你走出你的舒適程度並搜索一些東西。 在找到答案的過程中,您會發現許多其他重要的事情。
以下是使用的代碼。
Application.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var arrSource:Array = [{label:"Button1", color:0xDAC1C3},
{label:"Button2", color:0xDAC1C3},
{label:"Button3"}, {label:"Button4", color:0xDAC1C3}, {label:"Button5", color:0xDAC1C3},
{label:"Button6"}, {label:"Button7", color:0xDAC1C3}, {label:"Button8", color:0xDAC1C3},
{label:"Button9"},{label:"Button10", color:0xDAC1C3},{label:"Button11", color:0xDAC1C3}];
private var arrCol:ArrayCollection = new ArrayCollection(arrSource);
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:List id="lstBtns" dataProvider="{arrCol}" itemRenderer="MyItemRenderer">
</s:List>
</s:Application>
MyItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true" dataChange="onDataChange()">
<fx:Script><![CDATA[
import mx.core.UIComponent;
import spark.components.RadioButtonGroup;
import spark.skins.spark.RadioButtonSkin;
private static var rdoBtnGrp:RadioButtonGroup = new RadioButtonGroup();
private function onDataChange():void {
changeColorForMultiCube();
}
private function changeColorForMultiCube():void {
if (data['color'] != null ) {
box.setStyle("skinClass",MySkin2);
}
else{
box.setStyle("SkinClass",RadioButtonSkin);//default skin for radio button
}
}
]]></fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:RadioButton id="box" change="onDataChange()" label="{data.label}" group="{rdoBtnGrp}"/>
</s:ItemRenderer>
MySkin2.mxml除非您有特殊原因,否則不要刪除在制作皮膚時預先寫好的任何內容。 我已經在這個皮膚只增加Rect
與id="bgColor"
的前labelDisplay
。 填充顏色負責單選按鈕的背景顏色。 如果要將此顏色設置為動態,則需要創建一個擴展RadioButton
的類並在那里定義[SkinPart]。 請看這個和這個
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for a Spark RadioButton component.
@see spark.components.RadioButton
@see spark.components.RadioButtonGroup
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabledStates="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.RadioButton")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
/* Define the skin elements that should not be colorized.
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay", "dot"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/* Define the symbol fill items that should be colored by the "symbolColor" style. */
static private const symbols:Array = ["dotFill"];
/**
* @private
*/
override public function get symbolItems():Array {return symbols};
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>
<fx:Script>
<![CDATA[
/**
* @private
*/
private static const focusExclusions:Array = ["labelDisplay"];
/**
* @private
*/
override public function get focusSkinExclusions():Array { return focusExclusions;};
]]>
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" stateGroups="overStates" />
<s:State name="down" stateGroups="downStates" />
<s:State name="disabled" stateGroups="disabledStates" />
<s:State name="upAndSelected" stateGroups="selectedStates" />
<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
<s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
</s:states>
<s:Group verticalCenter="0" width="13" height="13">
<!-- drop shadow -->
<s:Ellipse left="-1" top="-1" right="-1" bottom="-1">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000"
color.downStates="0xFFFFFF"
alpha="0.011"
alpha.downStates="0" />
<s:GradientEntry color="0x000000"
color.downStates="0xFFFFFF"
alpha="0.121"
alpha.downStates="0.57" />
</s:LinearGradientStroke>
</s:stroke>
</s:Ellipse>
<!-- fill -->
<s:Ellipse left="1" top="1" right="1" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.overStates="0xBBBDBD"
color.downStates="0xAAAAAA"
alpha="0.85" />
<s:GradientEntry color="0xD8D8D8"
color.overStates="0x9FA0A1"
color.downStates="0x929496"
alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Ellipse>
<!-- fill highlight -->
<s:Path data="M 1 6 Q 2 2 6 1 Q 11 2 12 6 h -9">
<s:fill>
<s:SolidColor color="0xFFFFFF" alpha="0.33" />
</s:fill>
</s:Path>
<!-- layer 6: highlight stroke (all states except down) -->
<s:Ellipse left="1" right="1" top="1" bottom="1">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" color.downStates="0x939393" alpha.overStates="0.22" />
<s:GradientEntry color="0xD8D8D8" color.downStates="0xB1B1B1" alpha.overStates="0.22" />
</s:LinearGradientStroke>
</s:stroke>
</s:Ellipse>
<s:Rect left="5" top="1" right="5" height="1">
<s:fill>
<s:SolidColor color="0xFFFFFF"
color.downStates="0x939393"
alpha.overStates="0.22" />
</s:fill>
</s:Rect>
<!-- border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
<s:Ellipse left="0" top="0" right="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.70" />
<s:GradientEntry color="0x000000" alpha="0.80" />
</s:LinearGradientStroke>
</s:stroke>
</s:Ellipse>
<!-- dot -->
<!--- Defines the appearance of the RadioButton's dot. To customize the appearance of the dot, create a custom RadioButtonSkin class. -->
<s:Path left="4" top="4" includeIn="selectedStates" id="dot" itemCreationPolicy="immediate"
data="M 2.5 0 Q 4.5 0.5 5 2.5 Q 4.5 4.5 2.5 5 Q 0.5 4.5 0 2.5 Q 0.5 0.5 2.5 0">
<s:fill>
<!--- @private
Defines the appearance of the dot's fill. The default color is 0x000000. The default alpha is .9. -->
<s:SolidColor id="dotFill" color="0" alpha="0.9" />
</s:fill>
</s:Path>
<s:Path left="4" top="7" includeIn="selectedStates"
data="M 0 0 Q 0.5 2 2.5 2.0 Q 3.5 2.0 4 0">
<s:stroke>
<s:LinearGradientStroke>
<s:GradientEntry color="0xFFFFFF" alpha="0.3" />
<s:GradientEntry color="0xFFFFFF" alpha="0.7" />
<s:GradientEntry color="0xFFFFFF" alpha="0.3" />
</s:LinearGradientStroke>
</s:stroke>
</s:Path>
</s:Group>
<!-- Label -->
<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Rect id="bgColor" left="18" right="0" top="3" bottom="3" verticalCenter="2"
>
<s:fill>
<s:SolidColor color="0xDAC1C3" />
</s:fill>
</s:Rect>
<s:Label id="labelDisplay"
textAlign="start"
verticalAlign="middle"
maxDisplayedLines="1"
left="18" right="0" top="3" bottom="3" verticalCenter="2" />
</s:SparkSkin>
試試這樣吧
myRadBtnId.setStyle("backgroundColor","0x00FF00");
(要么)
myRadBtnId.setStyle("backgroundColor", #E8E8E8);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.