如何在Flex中将一个按钮居中对齐到HBox中？

Question

我有一个VBox，其中包含4个HBox。第二层HBox最初是隐藏的。当我点击标签“显示更多选项”时，第二层HBox会显示出来。 现在，“第二级HBox”占用的空间为空，并且“搜索”按钮出现在该空间下方。

我的第一个问题是，是否有一种方法可以定位搜索按钮，使得该空间不存在，并且在单击“显示更多选项”标签后，“第二级HBox”出现?

我的第二个问题是，我可以将搜索按钮放置在页面中央吗？是否有任何方法可以使VBox的HBox内容居中对齐？

这是我的代码:

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

- Angeline

Answer 1

为了在HBox中居中内容，请将以下属性添加到所需的盒子中：

horizontalAlign="center" width="100%"

至于由不可见的盒子（HBox或VBox）创建的空白空间，我不知道是否有任何方法，但我发现自己将此属性添加到不可见的盒子中：

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

希望能帮到你。

- sharat87

---

这个水平对齐只是将HBox内的内容对齐到中心位置。但它仍然在网页的角落里。如何将其移到中心位置？ - Angeline

我不太明白你的意思，但请阅读我的编辑...看看是否可以解决问题... - sharat87

不错！但是如果没有指定宽度，horizontalAlign属性就无法起作用！ - Keshav

@Keshav，抱歉，我的知识就到这里了，我现在不做flex :) - sharat87

Answer 2

要真正隐藏组件，将includeInLayout属性设置为可见的任何内容。 (或者在更改可见性时自己设置) 默认情况下，它为true，因此无论组件是否可见，空间都会被测量出来。

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

- ZaBlanc

Answer 3

你可以使用flex states来在需要的时候添加第二级水平盒子。

- Amarghosh