为什么我的网格布局太奇怪了

Question

我试图了解 gridlayout 的工作原理，但结果让我非常失望。

确实，我的布局不适用于宽度 GridItem。

对于每个 mx:GridRow，GridItem 的总 colspan 为 6。

一开始，我定义了 GridRow 的百分比宽度，但正如您所见，即使宽度和 colspan 数相同，GridItem 的大小也不相同！

主要问题在 GridRow 1 和 GridRow 2 上，两个 dropdowlist 都太大了！

    <s:VGroup id="mainContainer" width="{contentGroup.width}" height="{contentGroup.height}"  >




    <!-- partie centrale-->

    <s:VGroup  height="100%" width="100%">


        <s:BorderContainer width="100%" verticalCenter="0">
            <mx:Grid width="100%" height="100%"
                     paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5">

                <mx:GridRow id="l1" width="100%">
                    <mx:GridItem colSpan="1" width="15%" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" width="35%" horizontalAlign="left">
                        <s:DropDownList id="cbCivilCor" width="100%"
                                        prompt="" />
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" width="15%" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label"  width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left" width="35%">
                        <s:DropDownList id="cbSpecCor" width="100%"
                                        prompt=""/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l2" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left" >
                        <s:TextInput id="tiNom" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="left">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left" width="100%">
                        <s:TextInput id="tiPrenom" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l3" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="4" horizontalAlign="left" width="100%">
                        <s:TextInput id="tiAdr1" width="100%"/>
                    </mx:GridItem>

                </mx:GridRow>
                <mx:GridRow id="l4" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                    </mx:GridItem>
                    <mx:GridItem colSpan="4" horizontalAlign="left">
                        <s:TextInput id="tiAdr2" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l5" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:TextInput id="tiCP" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left">
                        <s:TextInput id="tiVille" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l6" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:DropDownList id="cbTypeTel1" 
                                        prompt="" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:TextInput id="tiNumTel1" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left">
                        <s:TextInput id="tiRemTel1" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l7" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:DropDownList id="cbTypeTel2" 
                                        prompt="" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:TextInput id="tiNumTel2" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left">
                        <s:TextInput id="tiRemTel2" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l8" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:TextInput id="tiFax" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left">
                        <s:TextInput id="tiMail" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l9" width="100%">
                    <mx:GridItem colSpan="3" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label tres long" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="3" horizontalAlign="left">
                        <s:DropDownList id="cbAppelCourr" 
                                        prompt="" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l10" width="100%">
                    <mx:GridItem colSpan="3" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label tres long" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="3" horizontalAlign="left">
                        <s:DropDownList id="cbPoliCourr" 
                                        prompt="" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>
            </mx:Grid>
        </s:BorderContainer>






        <customNavTab:IconToggleButtonBar id="tbbAction" height="6%" 
                                          dataProvider="{buttons}"
                                          itemClick="changeBbHandler(event)" labelPlacement="bottom"
                                          paddingBottom="2" selectedIndex="-1" toggleOnClick="false"
                                          horizontalAlign="center"
                                          bottom="3"
                                          width="100%"/>


    </s:VGroup>

</s:VGroup>

那么，你能解释一下为什么布局不符合我的希望！

谢谢。

Answer 1

问题是您的GridItems 不一致。您可以在所有单元格线下绘制一条假想线，并且它们需要对齐，因为这是网格布局。如果在一种情况下，您说您希望一个单元格为 35%，而将其正下方的一个单元格设置为 100%，那么您手头就有问题了。如果您要使用网格布局，单元格宽度需要保持一致......出于这个原因，我更喜欢网格布局，但我相信您可以解决它。

采取这种方法：

1。注释掉除第一行之外的所有内容。凉爽的！它按照您想要的方式布置。

2。现在取消注释第二行。

您的布局已经搞砸了。为什么？因为第二行所有的GridItems都设置了width="100%"，与第一行的宽度不一致。

3。将宽度设置为与第一行相同的百分比。还要确保将其中的输入控件拉伸到 100%。

冲洗并重复。