为了您的方便，我在这里再次发布答案。但我会要求你走出你的舒适水平并搜索东西。在寻找答案的过程中，您会发现许多其他重要的事情。
以下是使用的代码。
应用程序.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>