Como centralizar alinhado um botão em um hbox no flex?

Question

Eu tenho um Vbox dentro do qual tenho 4 Hboxes. O Hbox de segundo nível está inicialmente oculto. Quando clico no rótulo, 'Mostrar mais opções', o Hbox de segundo nível é exibido. Agora eu tenho o espaço ocupado pelo 'Hbox de segundo nível' vazio e pelo botão 'Search' Appaers abaixo do espaço.

Minha primeira pergunta é: existe uma maneira de posicionar o botão de pesquisa de tal maneira que o espaço não existe e, depois que o rótulo 'Mostrar mais opções' é clicado, o 'segundo nível Hbox' aparece?

E a segunda pergunta é: posso posicionar o botão de pesquisa no centro da página. Existe algum método para centralizar o conteúdo de um hbox de um vbox?

Este é o meu código:

<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

Para centralizar as coisas dentro de um hbox, adicione o seguinte atributo à caixa em questão,

horizontalAlign="center" width="100%"

Quanto ao espaço vazio criado por caixas invisíveis (hbox ou vbox), eu não sei se há alguma maneira, mas me vejo adicionando esse atributo à caixa invisível,

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

espero que ajude

Answer 2

Para realmente ocultar o componente, defina o atributo IncluirInlayout para qualquer que seja visível. (Ou defina você mesmo quando você mudar visível) por padrão, é verdade, portanto, se o componente é visível ou não, o espaço é medido.

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

Answer 3

Você pode usar estados flexíveis Para adicionar o Hbox de segundo nível como e quando for necessário.