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

Question

我尝试了解gridlayout的工作方式，结果我非常失望。

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

对于每个MX：GridRow，总的GridItem是列跨度6.

起初GridRow，我定义，以百分比宽度，但可以看到，具有的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

问题是您的GridItem s不一致。你可以在所有单元格线上绘制一条虚线，并且它们需要排队，因为这是一个网格布局。如果在一种情况下，你说你想要一个单元格为35％，而直接在单元格下面的单元格为100％，那么你手上就有问题。如果您要使用网格布局，单元格宽度需要保持一致...由于这个原因，我更喜欢网格布局，但我相信您可以解决它。

采取这种做法：

1。除了第一行以外，请注意所有内容。凉！它按照你想要的方式布置。

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

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

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

冲洗并重复。