我正在尝试制作颜色数量有限的紧凑型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"/>
您可以调整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);
}
这会给你这样的东西:
希望能对您有所帮助。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句