come centrare e allineare un pulsante in un hbox in flex?

Question

Ho un VBox all'interno del quale ho 4 HBox.L'HBox di secondo livello è inizialmente nascosto.Quando faccio clic sull'etichetta "Mostra più opzioni", viene visualizzato l'HBox di secondo livello.Ora ho lo spazio occupato dal 'HBOx di secondo livello' vuoto e il pulsante 'cerca' appare sotto lo spazio.

La mia prima domanda è: esiste un modo per posizionare il pulsante di ricerca in modo tale che lo spazio non sia presente e dopo aver fatto clic sull'etichetta "Mostra più opzioni" venga visualizzata la "HBox di secondo livello"?

E la seconda domanda è: posso posizionare il pulsante di ricerca al centro della pagina.Esiste un metodo per centrare il contenuto di un HBox di un VBox?

Questo è il mio codice:

<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

Per centrare gli oggetti all'interno di un HBox, aggiungi il seguente attributo alla casella in questione,

horizontalAlign="center" width="100%"

Per quanto riguarda lo spazio vuoto creato dalle scatole invisibili (HBox o VBox), non so se esiste un modo, ma mi ritrovo ad aggiungere questo attributo alla scatola invisibile,

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

Spero possa aiutare

Answer 2

Per nascondere veramente il componente, impostare l'attributo includeInLayout a tutto ciò che è visibile. (O impostare da soli quando si cambia visibile) Per impostazione predefinita, è vero, quindi se il componente è visibile o meno, lo spazio è misurato fuori.

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

Answer 3

È possibile utilizzare flex stati per aggiungere il secondo livello di hbox come e quando è necessario.