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

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

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

<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 的默认最小尺寸是 100x100 像素。

但要克服此限制，您可以像这样使用 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 中设置背景面板大小？

Set background panel size in ColorPicker?

apache-flex

actionscript-3

flex4