Seltsames Verhalten für rowSpan in Flex

Question

Bei der Arbeit mit einer Grid-Komponente in Flex stoße ich auf einige Kuriositäten. Ich habe das folgende Formular, das ein Raster zum Ausrichten der Felder verwendet. Wie Sie sehen können, hat jede GridRow einen Rand.

Mein Problem ist, dass der Rand immer noch durch GridItems sichtbar ist, die sich über mehrere Zeilen erstrecken (beobachten Sie den TextArea, der sich über 4 Zeilen erstreckt, die GridRow-Ränder gehen nach rechts, wenn man ihn nicht sieht!)

Irgendwelche Ideen, wie man das beheben kann?

Answer 1

Ich denke, das Problem besteht darin, dass beim Zeichnen des Rasters jede Zeile von oben nach unten und innerhalb jeder Zeile die Elemente von links nach rechts gezeichnet werden.Das zeilenübergreifende Element <mx:TextArea> wird also zuerst gezeichnet und erstreckt sich bis in den Bereich der beiden nächsten Zeilen, die danach und darüber gezeichnet werden.

Der schnellste Weg, den ich mir vorstellen kann, wäre, stattdessen die Zeilenränder auf den <mx:GridItem>s zu zeichnen und dabei den linken und rechten Rand basierend auf der Platzierung des Elements in der Zeile zu überspringen.Etwas wie das:

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