Flex - 垂直对齐数据网格中的单元格答案

【问题标题】：Flex - Vertical Align Cells in a DatagridFlex - 垂直对齐数据网格中的单元格
【发布时间】：2010-11-27 07:22:36
【问题描述】：

我在 Flex 的 DataGrid 中垂直对齐单元格内的文本时遇到问题。我在列上的 itemRenderer 中尝试了 this.setStyle("vertical-align", "middle) 但它似乎不起作用......我也尝试了 verticalAlign。

【问题讨论】：

标签： apache-flex datagrid vertical-alignment

【解决方案1】：

try use <s:HorizontalLayout verticalAlign="middle">:


<s:GridColumn headerText="Action" >
 <s:itemRenderer>
   <fx:Component>
     <s:GridItemRenderer>
       <s:layout>
      <s:HorizontalLayout verticalAlign="middle" paddingLeft="5"/>
    </s:layout>
    <s:Button label="View"  click="outerDocument.view(event)" />
    <s:Button label="Unlink" click="outerDocument.unlink(event)"  />
  </s:GridItemRenderer> 
  </fx:Component>
</s:itemRenderer>    
</s:GridColumn>

【讨论】：

【解决方案2】：

mx:Text 和 TextField 控件不直接支持verticalAlign 样式。

最简单的方法是对齐容器的内容，例如container.setStyle("verticalAlign", "bottom") 左右。

如果容器使用绝对布局，可以设置top、bottom、left、right其中之一样式到0，以相应地对齐。

【讨论】：

【解决方案3】：

使用 DataGrid 的 verticalAlign 属性（设置为“中间”）

verticalAlign：一个渲染器在一行中的垂直对齐方式

http://www.adobe.com/livedocs/flex/2/langref/mx/controls/DataGrid.html#styleSummary

【讨论】：

【解决方案4】：

在 DataGridColumn 上尝试 textAlign。

【讨论】：

【解决方案5】：

看起来 flex 本身不支持它，但我找到了一个 hack 来完成这项工作。

让单元格继承一个 Box 并在 box 内放置一个标签。然后你可以在 Box 上设置 verticalAlign="middle"。

【讨论】：