jak wyśrodkować przycisk w hbox flex?

Question

Mam VBox wewnątrz którego mam 4 HBox. Drugi poziom HBox jest początkowo ukryty. Po kliknięciu etykiety "Pokaż więcej opcji" wyświetlany jest drugi poziom HBox. Teraz mam miejsce zajmowane przez "HBOx drugiego poziomu" puste, a przycisk "szukaj" znajduje się pod spacji.

Moje pierwsze pytanie brzmi: czy istnieje sposób na umieszczenie przycisku wyszukiwania w taki sposób, że nie ma tam miejsca i po kliknięciu etykiety "Pokaż więcej opcji" pojawi się "HBox drugiego poziomu"?

Drugie pytanie brzmi: Czy mogę umieścić przycisk wyszukiwania na środku strony. Czy istnieje metoda centrowania zawartości HBox VBox?

To jest mój kod:

<mx:Form x="47" y="219" width="80%" > 


<mx:VBox id="searchBox" > 
    <mx:HBox id="searchTitle" width="100%" height="20" backgroundColor="#2680D5"> 
     <mx:Label text="Search Criteria" paddingRight="250" width="654.6212" height="18.030302"/> 
     <mx:Label text="show more options" id="moreOption" click="showOption(event)" width="127.045456" height="21.969696"/> 

    </mx:HBox> 

    <mx:HBox id="firstLevel" paddingBottom="10" paddingTop="15" > 

     <mx:Label text="Task Name" paddingLeft="20"/> 
     <mx:TextInput id="searchTaskName" paddingLeft="10" /> 

     <mx:Label text="Item Code" paddingLeft="30"/> 
     <mx:TextInput id="searchItemCode" paddingLeft="10"/> 

     <mx:Label text="Task Type" paddingLeft="30"/> 
     <mx:ComboBox id="searchTaskType" paddingLeft="10"/> 
    </mx:HBox> 

    <mx:HBox id="secondLevel" visible="false" paddingTop="5"> 

     <mx:Label text="Task ID" paddingLeft="20" /> 
     <mx:TextInput id="searchTaskId" paddingLeft="10"/> 



     <mx:Label text="Project Won" paddingLeft="30"/> 
     <mx:ComboBox id="searchWon" paddingLeft="10"/> 
    </mx:HBox> 


    <mx:HBox> 
     <mx:Button label="Search" /> 
    </mx:HBox> 


</mx:VBox> 

Answer 1

Aby wyśrodkować rzeczy wewnątrz hbox, należy dodać następujący atrybut do pudełka w pytaniu

horizontalAlign="center" width="100%" 

Co do pustej przestrzeni utworzonej przez niewidzialne pudełka (HBox lub VBox), nie wiem, czy jest jakiś sposób, ale dodam ten atrybut do niewidzialnego pudełka,

height="{secondLevel.visible ? 200 : 0}" 

nadzieję, że pomoże

Answer 2

Można użyć flex states dodać drugi poziom hbox jak i kiedy jest to konieczne.

Answer 3

Aby naprawdę ukryć składnik, ustaw atrybut includeInLayout na dowolny widoczny element. (Lub ustaw je samodzielnie po zmianie widoczności) Domyślnie jest to prawda, więc czy składnik jest widoczny czy nie, przestrzeń jest odmierzana.

<mx:HBox id="secondLevel" visible="false" includeInLayout="{secondLevel.visible}" paddingTop="5">