Flex 3.5 - 양식 맞춤

Question

이 양식을 만들었지 만 볼 수 있듯이 필드의 첫 번째 열이 올바르게 정렬되지 않았습니다. 그래픽 편집기로 해보려고했지만 그냥하지 않을 것입니다.

<mx:TitleWindow 
    id="SearchTitleWindow" 
    title="Recherche" 
    showCloseButton="true" 
    horizontalAlign="right" 
    width="627.8656" 
    height="201" x="267" y="275"> 

    <mx:VBox width="100%" height="116"> 
     <mx:HBox> 
      <mx:FormItem label="Numéro voie : " width="140.71146" height="21.007908"> 
       <mx:TextInput id="numVoie" width="41.916996" height="21.007908"/> 
      </mx:FormItem> 
      <mx:FormItem label="Nature voie : " > 
       <mx:TextInput id="natVoie" width="100"/> 
      </mx:FormItem> 
      <mx:FormItem label="Nom voie* : " > 
       <mx:TextInput id="nomVoie" width="163.91306" height="21.007908"/> 
      </mx:FormItem> 
     </mx:HBox> 
     <mx:HBox width="597.33203" height="20.98814"> 
      <mx:FormItem label="Complement : " width="599.3083" height="21.007908"> 
       <mx:TextInput id="Complement" width="497.92493" height="21.007908"/> 
      </mx:FormItem> 
     </mx:HBox> 
     <mx:HBox> 
      <mx:FormItem label="Code postal* : " > 
       <mx:TextInput id="codePostal" width="101.581024" height="21.996048"/> 
      </mx:FormItem> 
      <mx:FormItem label="Commune* : " > 
       <mx:TextInput id="Commune" width="294.13046" height="21.007908"/> 
      </mx:FormItem> 
     </mx:HBox> 
     <mx:HBox> 
      <mx:FormItem label="Coordonnées : " > 
        <mx:TextInput id="coordOne" width="169.01187" height="21.007908"/> 
      </mx:FormItem> 
      <mx:FormItem label=" " > 
       <mx:TextInput id="coordTwo" width="169.40714" height="21.007908"/> 
      </mx:FormItem> 
      <mx:Button id="geocoderTourneeSearchBtn" 
         styleName="button" 
         width="120" 
         label="Géocoder"/> 
     </mx:HBox> 
    </mx:VBox> 

    <mx:ControlBar horizontalAlign="right" height="45"> 
     <mx:Button id="cancelTourneeSearchBtn" 
        styleName="button" 
        width="200" 
        label="Annuler"/> 
     <mx:Button id="searchTourneeSearchBtn" 
        styleName="button" 
        width="200" 
        label="Rechercher"/> 
    </mx:ControlBar> 
</mx:TitleWindow> 

이상한 높이와 폭 매개 변수는 그래픽 편집기로 설정되어 있습니다 : 여기

는 코드입니다. 어떻게해야할까요?

감사합니다.

PS : 만 3.5

Answer 1

는 사실,이 문제가 라벨의 폭을 변화로 인해 발생하는 플렉스 SDK를 사용할 수 있습니다. 나는 또한 내 프로젝트에서 같은 문제에 직면했다. 그리고 각 formItem 레이블의 동일한 폭을 설정하여이 문제를 해결했습니다. 모든 formItem 레이블의 너비를 가장 긴 길이 레이블의 너비로 설정해야합니다.

양식에 "Coordonnées"라는 레이블이 최대 너비를 갖습니다. 그래서, "coordonnées"라벨의 너비로 각 formItem 라벨의 너비를 설정합니다.

Answer 2

여기서 문제는 제공 한 코드의 어느 곳에서나 Form 컨테이너를 사용하지 않는다는 것입니다.

A 플렉스 Form은 FormItems와 함께 작동하여 가장 큰 라벨의 폭을 계산합니다. 따라서 레이블을 오른쪽 정렬 할 수 있도록 각 FormItem의 위치 (또는 치수)를 조정할 수 있습니다.

일부 행에는 여러 양식 항목이있는 복잡한 양식이 있습니다. 적절한 양식 레이아웃을 얻는 데있어서 이것이 얼마나 효과적 일지는 분명치 않습니다. 하지만 개발자들이이 사실을 예상했을지도 모른다고 생각합니다.

여기에 양식이 MXML로 지정해야하는 방법은 다음과 같습니다

<mx:Form> 
    <mx:FormItem label="label 1"> 
     <mx:TextInput id="textInput1" /> 
    </mx:FormItem> 
    <mx:FormItem label="label 2"> 
     <mx:TextInput id="textInput2" /> 
    </mx:FormItem> 
</mx:Form> 

난 당신이 같은 행에 여러 FormItems을 처리하는 방법을 정확히 모르겠어요. 두 개 이상의 FormItem 컨트롤이 포함 된 HBox을 사용해 보겠습니다. 그러나 나는 그것에 많은 시간을 할애하지 않을 것이다.

당신은 행과 열 제약 조건 기반의 레이아웃을 사용하여 구현이 쉽게 찾을 수 있습니다. Canvas 컨테이너는 위쪽, 아래쪽, 왼쪽, 오른쪽과 같은 레이아웃 제약 조건을 지원합니다. constrainColumns 및 constraintRows 어레이를 사용하여 자체 그리드를 설정할 수도 있습니다.