سلوك غريب لrowSpan في Flex

Question

أواجه بعض الأمور الشاذة عند العمل مع مكون Grid في flex، لدي النموذج التالي الذي يستخدم شبكة لمحاذاة الحقول، كما ترون، كل GridRow له حدود.

مشكلتي هي أن الحدود لا تزال مرئية من خلال GridItems التي تمتد عبر صفوف متعددة (لاحظ منطقة TextArea التي تمتد على 4 صفوف، حيث تتجه حدود 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>