Question

我正在使用flex 4 GUI进行简单的对齐，但无法找出原因。

我有button1，button2和文本字段。我希望水平对齐它们，并为文本垂直居中。对于以下代码，我看到以下输出。

_______   ______
|bt1   | |bt2   |   text1
|______| |______|

我的问题是; 1）为什么我在btn 1 verticalCenter =“10”和btn2 verticalCenter =“ - 10”发送的属性仍然对齐？我不应该看到一个人起来而且那个人没有？ 2）为什么我的text1对齐顶部，即使我将它设置为verticalCenter = 0，我在组中或不在组中尝试它。

谢谢你们

<?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:Group minWidth="100">
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>
        <s:Button label="myButton" click="" horizontalCenter="0"
            verticalCenter="10"/>
        <s:Button label="myButton" click="" verticalCenter="-10"/>
        <s:Group verticalCenter="0" horizontalCenter="0">
            <s:Label text="hello" color="#FFFF" verticalCenter="0"
                textAlign="center" />
        </s:Group>

    </s:Group>
</s:Application>

Answer 1

其他人可能会理解为什么会这样，因为这是一个常见的问题。

使用HorizontalLayout或VerticalLayout时，不会使用您在“布局对象”上设置的某些属性。发生这种情况是因为这些属性在垂直/水平布局中无法正常工作或有意义。

垂直/水平布局忽略的布局属性：

x和y坐标
horizontalCenter和verticalCenter
top，bottom，left，right contstraints

以上属性适用于默认的BasicLayout类。

正如@Mahesh Parate的回答所示，垂直/水平布局允许使用horizontalAlign和verticalAlign属性对内容进行居中。

Answer 2

下面的代码可以帮助您： - 在HorizontalLayout中添加verticalAlign =“middle”，这将解决您的问题。

<?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>
    <fx:Script>
        <![CDATA[

            protected function onClickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub

            }

        ]]>
    </fx:Script>
    <s:Group minWidth="100" >
        <s:layout>
            <s:HorizontalLayout verticalAlign="middle"/>
        </s:layout>
        <s:Button label="myButton" click="onClickHandler(event)" horizontalCenter="0"
                  verticalCenter="10"/>
        <s:Button label="myButton" click="onClickHandler(event)" verticalCenter="-10"/>
        <s:Group verticalCenter="0" horizontalCenter="0">
            <s:Label text="hello" color="#FFFF" verticalCenter="0"
                     textAlign="center" />
        </s:Group>

    </s:Group>
</s:Application>

flex 4组中的一个中心元素

2 个答案: