flex中rowSpan的奇怪行为

Question

在Flex中使用Grid组件时，我遇到了一些奇怪现象，如下所示，我使用以下格式来对齐字段，如您所见，每个GridRow都有一个边框。

我的问题是，边界尚可见通过跨多个行GridItems（观察跨越4行了TextArea中，GridRow边界径直去把它扔！）

如何解决这个问题的任何想法？

Answer 1

我认为问题在于当绘制网格时，它会从上到下绘制每一行，并在每一行内将这些项从左到右绘制。因此，跨行< mx：TextArea >项目首先向下延伸到下两行的区域中，该行将在后面和上面绘制。

我能看到的最快捷方式是在< mx：GridItem > s上绘制行边框，而不是根据该行在该行中的位置跳过左右边缘。类似这样的：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:Style> 
     Grid { 
      background-color: white; 
      horizontal-gap: 0; 
     } 
     GridItem { 
      padding-top: 5; 
      padding-left: 5; 
      padding-right: 5; 
      padding-bottom: 5; 
      background-color: #efefef; 

      border-style: solid; 
      border-thickness: 1; 
      border-color: black; 
     } 
     .left { 
      border-sides: top, bottom, left; 
     } 
     .right { 
      border-sides: top, bottom, right; 
     } 
     .center { 
      border-sides: top, bottom; 
     } 
    </mx:Style> 
    <mx:Grid> 
     <mx:GridRow> 
      <mx:GridItem styleName="left"> 
       <mx:Label text="Label"/> 
      </mx:GridItem> 
      <mx:GridItem styleName="center"> 
       <mx:ComboBox/> 
      </mx:GridItem> 
      <mx:GridItem styleName="center"> 
       <mx:Label text="Label"/> 
      </mx:GridItem> 
      <mx:GridItem styleName="right"> 
       <mx:ComboBox/> 
      </mx:GridItem> 
     </mx:GridRow> 
     <mx:GridRow> 
      <mx:GridItem styleName="left"> 
       <mx:Label text="Label"/> 
      </mx:GridItem> 
      <mx:GridItem styleName="center"> 
       <mx:TextInput/> 
      </mx:GridItem> 
      <mx:GridItem colSpan="2" rowSpan="3"> 
       <mx:VBox width="100%" height="100%"> 
        <mx:Label text="Label"/> 
        <mx:TextArea width="100%" height="100%"/> 
       </mx:VBox> 
      </mx:GridItem> 
     </mx:GridRow> 
     <mx:GridRow> 
      <mx:GridItem styleName="left"> 
       <mx:Label text="Label"/> 
      </mx:GridItem> 
      <mx:GridItem styleName="center"> 
       <mx:TextInput/> 
      </mx:GridItem> 
     </mx:GridRow> 
     <mx:GridRow> 
      <mx:GridItem styleName="left"> 
       <mx:Label text="Label"/> 
      </mx:GridItem> 
      <mx:GridItem styleName="center"> 
       <mx:TextInput/> 
      </mx:GridItem> 
     </mx:GridRow> 
    </mx:Grid> 
</mx:Application>