как по центру выровнять кнопку в hbox в flex? - PullRequest
Новая
       38

как по центру выровнять кнопку в hbox в flex?

10 голосов
/ 07 октября 2009

У меня есть VBox, внутри которого у меня есть 4 HBox. Второй уровень 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>

Ответы [ 3 ]

10 голосов
/ 07 октября 2009

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

horizontalAlign="center" width="100%"

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

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

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

1 голос
/ 08 октября 2009

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

<mx:HBox id="secondLevel" visible="false" includeInLayout="{secondLevel.visible}" paddingTop="5">
0 голосов
/ 07 октября 2009

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

...