Flex:使用Group,HGroup和VGroup的另一个新手布局问题

时间:2012-05-02 04:31:23

标签: flex

如果您运行以下mxml代码,您会看到MyLabel1的位置高于其他标签(例如MyLabel2)和第二行的其他项目。

如何更改代码,以便MyLabel1MyLabel2等一致?

请注意,所有更改都需要保持MyLabel2MyLabel3MyButton3的组在MyLabel1(左侧)和{{1}之间保持相等的间隔(在右边),就像现在一样。换句话说,第二行的这个中间组不是在容器中居中,而是在左右两侧具有相等的空间。

MyLabel4

2 个答案:

答案 0 :(得分:1)

尝试:

将三个hgroup verticalAlign设置为中间,以便包含的项目位于组件高度的中间...

然后你需要指定三个hgroup的高度,因为: - 在第一个只有一个标签(有一定的高度) - 在其他两个中有一个按钮和一个textinput,其高度比简单标签(hgroup 1)高

使用组的自定义高度覆盖内部组件设置的高度

<s:VGroup top="10" left="20" right="20">

    <s:Group width="100%">

        <s:HGroup left="0" top="5" verticalAlign="baseline">
            <s:Label text="Some Text Here" />
        </s:HGroup>

        <s:HGroup right="0" verticalAlign="baseline">
            <s:Button label="Button1" width="65"/>
            <s:Button label="Button2" width="65"/>
        </s:HGroup>

    </s:Group> 

    <s:Spacer height="2"/>

    <s:HGroup width="100%" >

        <s:HGroup verticalAlign="middle" height="25">
            <s:Label text="MyLabel1"/>
        </s:HGroup>

        <s:Spacer width="100%"/> 

        <s:HGroup verticalAlign="middle" height="25">
            <s:Label text="MyLabel2"/>
            <s:Label text="MyLabel3"/>
            <s:Button label="MyButton3" width="85"/>            
        </s:HGroup>

        <s:Spacer width="100%"/>

        <s:HGroup verticalAlign="middle" height="25">
            <s:Label text="MyLabel4"/>
            <s:TextInput id="myID" />  
        </s:HGroup>

    </s:HGroup>

</s:VGroup> 

答案 1 :(得分:1)

只需将verticalAlign =“baseline”添加到大多数外部HGroup。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

        <s:VGroup top="10" left="20" right="20">

            <s:Group width="100%">

                <s:HGroup left="0" top="5" verticalAlign="baseline">
                    <s:Label text="Some Text Here" />
                </s:HGroup>

                <s:HGroup right="0" verticalAlign="baseline">
                    <s:Button label="Button1" width="65"/>
                    <s:Button label="Button2" width="65"/>
                </s:HGroup>

            </s:Group> 

            <s:Spacer height="2"/>

            <s:HGroup width="100%" verticalAlign="baseline" >

                <s:HGroup>
                    <s:Label text="MyLabel1"/>
                </s:HGroup>

                <s:Spacer width="100%"/> 

                <s:HGroup verticalAlign="baseline">
                    <s:Label text="MyLabel2"/>
                    <s:Label text="MyLabel3"/>
                    <s:Button label="MyButton3" width="85"/>            
                </s:HGroup>

                <s:Spacer width="100%"/>

                <s:HGroup verticalAlign="baseline">
                    <s:Label text="MyLabel4"/>
                    <s:TextInput id="myID" />  
                </s:HGroup>

            </s:HGroup>

        </s:VGroup>     

</s:Application>