Flex 中 rowSpan 的奇怪行为

Question

在使用 Flex 中的 Grid 组件时，我遇到了一些奇怪的情况，我有以下表单，它使用网格来对齐字段，如您所见，每个 GridRow 都有一个边框。

我的问题是，通过跨越多行的 GridItems，边框仍然可见（观察跨越 4 行的 TextArea，GridRow 边框向右扔了它！）

关于如何解决这个问题有什么想法吗？

Answer 1

我认为问题在于，绘制网格时，它从上到下绘制每一行，并在每行内从左到右绘制项目。因此，首先绘制行跨度的 <mx:TextArea> 项，向下延伸到接下来的 2 行的区域，这些行在后面和顶部绘制。

我能看到的最快的方法是在 <mx:GridItem> 上绘制行边框，根据项目在行中的位置跳过左右边缘。像这样的东西：

<?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>