爲什麼我的網格佈局太奇怪了

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％。

沖洗並重復。