带有皮肤的按钮的 Flex DataGrid答案

【问题标题】：Flex DataGrid with Button with Skin带有皮肤的按钮的 Flex DataGrid
【发布时间】：2014-01-31 02:55:58
【问题描述】：

尽我所能，当我将按钮放在火花数据网格中时，我无法为火花按钮设置皮肤。我被限制使用光环主题。

我在单独的 mxml 文件中创建了按钮渲染器；我在 dataGrid 之外有单独的按钮可以正确显示皮肤，所以我确信皮肤没有任何问题。这样做的重点是在 dataGrid 内部使用与外部相同的皮肤

以下代码显示了与我看到的相同的行为；在这种情况下，渲染器是在线创建的。似乎 skinClass 不受尊重。或者有其他方法吗。

<s:DataGrid id="dg" width="500" dataProvider="{employees2}">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="name" headerText="Name">
                <s:itemRenderer>
                    <fx:Component>
                        <s:GridItemRenderer>
                            <s:Button label="Press Me"
                                      top="0" bottom="0" left="0" right="0"
                                      skinClass="MyButtonSkin" />
                        </s:GridItemRenderer>
                    </fx:Component>
                </s:itemRenderer>
            </GridColumn>   
        </s:ArrayList>
    </s:columns>
</s:DataGrid>

在 MyButtonSkin.mxml 文件中

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
         minWidth="21" minHeight="21" 
         alpha.disabled="0.5">

<fx:Metadata>
    <![CDATA[ 
    /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.Button")]
    ]]>
</fx:Metadata>

<fx:Script fb:purpose="styling">
    <![CDATA[         
        /* 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"];

        /** 
         * @private
         */     
        override public function get colorizeExclusions():Array {return exclusions;}

        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }  

    ]]>        
</fx:Script>

<!-- states -->
<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states>

<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="10">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0xFAFAFA" 
                             color.over="0xBBBDBD" 
                             color.down="0xAAAAAA" 
                             alpha="0.85" />
            <s:GradientEntry color="0x808080" 
                             color.over="0x9FA0A1" 
                             color.down="0x929496" 
                             alpha="0.85" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 8: text -->
<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
<s:Label id="labelDisplay"
         textAlign="center"
         maxDisplayedLines="1"
         horizontalCenter="0" verticalCenter="1" verticalAlign="middle">
</s:Label>

</s:SparkButtonSkin>

【问题讨论】：

那里有什么更确切的错误？大小/位置？
when I place the button within a spark dataGrid. I am constrained to using the halo theme 这不是真的。不过，您可能应该使用GridItemRenderer。
感谢您的回复。这是使用 mx 和 halo 主题创建的大型项目的一小部分；这就是约束的来源。慢慢地，我将能够从 mx:halo 移动到 spark:spark，但现在它们必须共存。 itemRenderer 是一个错字——我现在已经更正了。
这样做的目的只是在网格中的按钮上获得圆角，以及一些字体细节。在 dataGrid 中时，它看起来不像一个按钮。

标签： actionscript-3 apache-flex datagrid flex-spark

【解决方案1】：

似乎将按钮缩放到网格项的大小不会调整角半径。

我最终得到了一个 200x200 像素、角半径为 6 像素的按钮；它只是看不见。我将值提高到 25，现在我可以看到它了

【讨论】：