apache-flex - 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>