DataGrid Flex中的Flex对齐复选框

而不是使用 <mx:Box /> 使用 <mx:Canvas /> 或 <s:Group /> (在Flex 4)。

此外,设置 horizontalCenter="0" 在复选框上。

例如:

<mx:itemRenderer>
    <mx:Component>
        <mx:Canvas width="100%" height="100%">
            <mx:CheckBox selected="{data.visibleInd}" horizontalCenter="0" />
        </mx:Canvas>
    </mx:Component>
</mx:itemRenderer>

只需使用DataGridColumn的 textAlign 风格:

<mx:DataGridColumn headerText="Visible" textAlign="center">
    <mx:itemRenderer>
        <mx:Component>
            <mx:CheckBox selected="{data.visibleInd}"/>
        </mx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>

我很肯定这会通过改变 mx:itemRenderer 到 mx:itemEditor .

请使用下面的提示将复选框和图像放置在列的中心。

<mx:CheckBox paddingLeft="20" />
<mx:Image horizontalAlign="center"/>

见:

<?xml version="1.0" encoding="utf-8"?>
    <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                        xmlns:s="library://ns.adobe.com/flex/spark"
                        xmlns:mx="library://ns.adobe.com/flex/mx">
        <fx:Script>
            <![CDATA[
                override public function prepare(hasBeenRecycled:Boolean):void {
                    if(data != null){
                        chb.selected = data[column.dataField];
                    }
                }

                protected function chb_clickHandler(event:MouseEvent):void{
                    data[column.dataField] = !chb.selected;
                }
            ]]>
        </fx:Script>
        <s:CheckBox id="chb" click="chb_clickHandler(event)" horizontalCenter="0" verticalCenter="0"/>
    </s:GridItemRenderer>

尝试将复选框宽度设为100%