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

StackOverflow https://stackoverflow.com/questions/1529706

  •  20-09-2019
  •  | 
  •  

Вопрос

У меня есть 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>

Это было полезно?

Решение

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

horizontalAlign="center" width="100%"

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

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

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

Другие советы

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top