그리드 레이아웃이 너무 이상한 이유

Question

나는 그리드 작업과 내가 그 결과에 매우 불만을 가지고 있음을 이해하려고 노력한다.

사실, 제 레이아웃은 GridItem 너비를 적용하지 않습니다. 각 MX를 들어

는 : GridRow은의 GridItem 총 열 병합 나는, 백분율 폭을 정의하지만 당신이 볼 수 있듯이,의 GridItem는 폭과 열 병합 수있는 경우에도 같은 크기되지 않은, 처음 GridRow 6.

입니다 똑같다!

주요 문제는 GridRow 1 및 GridRow 2에서 두 드롭 다운 목록이 너무 큽니다! 레이아웃 내 희망에 따라되지 않는 이유

<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이 일관성이 없다는 것입니다. 가상 라인을 모든 셀 라인 아래로 그릴 수 있으며 그리드 레이아웃이기 때문에 줄을 써야합니다. 한 경우에 셀을 35 %로 설정하고 그 바로 아래 셀을 100 %로 설정한다고 말하면 손에 문제가있는 것입니다. Grid 레이아웃을 사용하려는 경우 셀 너비는 일관성이 있어야합니다 ... 저는이 이유 때문에 Grid 레이아웃을 선호하지만 해결할 수 있다고 확신합니다.

1 :

이 방법을 가져 가라. 첫 행을 제외한 모든 것을 주석 처리하십시오. 시원한! 그것은 당신이 원하는 방식으로 배치됩니다.

2. 이제 두 번째 행의 주석 처리를 제거하십시오.

이미 레이아웃이 엉망입니다. 왜? 두 번째 행의 GridItem은 모두 width="100%"이므로 첫 번째 행의 너비와 일치하지 않습니다.

3. 너비를 첫 번째 행과 동일한 퍼센트로 설정하십시오. 또한 입력 컨트롤을 100 %까지 늘리십시오.

린스하고 반복하십시오.