Как центрировать выравнивание кнопки в hbox в flex?

У меня есть VBox, внутри которого у меня есть 4 HBoxes. Сначала HBox второго уровня скрыт. Когда я нажимаю на метку "Показать дополнительные параметры", отображается HBox второго уровня. Теперь у меня пространство занято "вторым уровнем HBOx" пустым, а кнопка "поиск" подпадает под пространство.

Мой первый вопрос: есть ли способ позиционировать кнопку поиска таким образом, чтобы пространство там не было и после нажатия метки "Показать больше параметров" появляется "Второй уровень HBox"?

И второй вопрос: могу ли я поместить кнопку поиска в центр страницы. Есть ли какой-либо метод для центрирования содержимого HBox VBox?

Это мой код:

<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>

Ответ 1

Чтобы разместить материал внутри HBox, добавьте следующий атрибут в поле, о котором идет речь,

horizontalAlign="center" width="100%"

Что касается пустого пространства, созданного невидимыми полями (HBox или VBox), я не знаю, есть ли какой-либо способ, но я обнаруживаю, что добавляю этот атрибут в невидимый квадрат,

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

Надеюсь, что поможет

Ответ 2

Чтобы по-настоящему скрыть компонент, установите атрибут includeInLayout в любое видимое. (Или настройте его самостоятельно, когда вы измените видимость) По умолчанию это правда, поэтому независимо от того, является ли компонент видимым или нет, пространство измеряется вне.

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

Ответ 3

Вы можете использовать состояния flex, чтобы добавить hbox второго уровня как и когда это необходимо.