wie eine Schaltfläche in einem hbox in flex zum Zentrum align?

Question

Ich habe eine VBox, innerhalb dessen ich 4 HBoxen haben. Die zweite Ebene HBox wird zunächst verborgen. Wenn ich das Etikett klicken auf ‚Weitere Optionen anzeigen‘, die zweite Ebene HBox angezeigt wird. Jetzt habe ich den Raum, der von der ‚zweiten Ebene hbox‘ besetzt leeren und die ‚Suche‘ Taste appaers unterhalb des Raums.

Meine erste Frage ist: Gibt es eine Möglichkeit, die Suchtaste so zu positionieren, dass der Raum ist nicht da, und nach dem ‚Mehr anzeigen Optionen‘ Label geklickt wird, der ‚Second Level HBox‘ erscheint?

Und die zweite Frage ist, kann ich Position die Suchtaste in der Mitte der Seite. Gibt es eine Methode, den Inhalt eines HBox eines VBox zum Zentrum?

Dies ist mein Code:

<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

Zum Zentrum Sachen in einem HBox, fügen Sie das folgende Attribut auf die Box in Frage,

horizontalAlign="center" width="100%"

Wie bei den leeren Raum von unsichtbaren Boxen erstellt (HBox oder VBox), ich weiß nicht, ob es einen Weg gibt, aber ich finde mich das Hinzufügen dieses Attribut in den unsichtbaren Feld

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

Ich hoffe, das hilft

Answer 2

Um wirklich die Komponente auszublenden, setzen Sie das includeInLayout Attribut zu, was sichtbar ist. (Oder es selbst einstellen, wenn Sie sichtbar ändern) standardmäßig, es ist wahr, also, ob die Komponente sichtbar ist oder nicht, wird der Raum gemessen werden.

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

Answer 3

Sie können mit flex Staaten die zweite Ebene hbox wie und hinzuzufügen, wenn es erforderlich ist.