Question

我正在尝试使用有限数量的颜色制作紧凑的colorPicker。我已经能够完成其中的大部分工作，但我找不到属性来设置背景面板的大小。

这是否暴露于造型或程序控制？

<fx:Script>
    <![CDATA[
    [Bindable]
    public var simpleDP:Array = ['0x000000', '0xFF0000', '0xFF8800',
        '0xFFFF00', '0x88FF00', '0x00FF00', '0xFF00FF', '0xFFFFFF'];
    ]]>
</fx:Script>

<fx:Style>

    .mySwatchPanel {
    backgroundColor:#E5E6E7;
    columnCount:10;
    horizontalGap:0;
    previewHeight:20;
    previewWidth:20;
    swatchGridBackgroundColor:#000000;
    swatchGridBorderSize:0;
    swatchHeight:20;
    swatchWidth:20;
    swatchHighlightColor:#FFFFFF;
    swatchHighlightSize:1;
    textFieldWidth:72;
    verticalGap:0;
    paddingBottom:0;
    }
</fx:Style>

    <mx:ColorPicker id="colorPicker" 
                    swatchPanelStyleName="mySwatchPanel" 
                    dataProvider="{simpleDP}" 
                    showTextField="false"
                    width="40" height="40"/>

Answer 1

请参阅 swatchPanelStyleName 样式属性，它必须有帮助。 http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/ColorPicker.html

Answer 2

您可以使用ColorPicker定义的默认样式属性调整SwatchPanel swatchPanelStyleName的大小，例如：

<fx:Style>
    .mySwatchPanel {

        backgroundColor:#E5E6E7;
        swatchHighlightColor:#FFFFFF;
        swatchHighlightSize:0;
        swatchGridBorderSize:0;
        swatchGridBackgroundColor:#000000;

        textFieldWidth:0;           

        previewHeight:20;
        previewWidth:20;

        columnCount:3;

        swatchHeight:20;
        swatchWidth:20;     

        paddingBottom:2;
        paddingTop:2;           
        paddingLeft:2;
        paddingRight:2;

        horizontalGap:0;
        verticalGap:0;

    }
</fx:Style>

这种风格会给你这样的东西：

当然你可以使用这些属性来获得你想要的大小，但不要忘记SwatchPanel的默认最小大小是100x100px。

但要超越此限制，您可以使用mx.core.mx_internal，例如：

<mx:ColorPicker id="colorPicker" width="40" height="40" dataProvider="{simpleDP}" 
                showTextField="false" swatchPanelStyleName="mySwatchPanel" 
                open="colorPicker_openHandler(event)" />

和

protected function colorPicker_openHandler(event:DropdownEvent):void
{           
    // resize the SwatchPanel once then remove the event listener
    colorPicker.mx_internal::dropdown.mx_internal::setUnscaledWidth(62);
    colorPicker.mx_internal::dropdown.mx_internal::setUnscaledHeight(85);
    ColorPicker(event.target).removeEventListener('open', colorPicker_openHandler);
}

会给你这样的东西：

希望可以提供帮助。

在ColorPicker中设置背景面板大小？

2 个答案: