Нечетное поведение для rowSpan в Flex

Question

Я испытываю некоторые странности при работе с компонентом Grid в flex, у меня есть следующая форма, которая использует сетку для выравнивания полей, как вы можете видеть, каждая GridRow имеет границу.

Моя проблема заключается в том, что граница все еще видна через GridItems, которые охватывают несколько строк (соблюдайте TextArea, который охватывает 4 ряда, границы GridRow идут прямо бросил его!)

Любые идеи о том, как это исправить?

Answer 1

Я думаю, проблема в том, что когда Grid рисуется, она рисует каждую строку сверху вниз и внутри каждой строки элементы слева направо. Таким образом, строка-натянутая позиция < 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>