为什么 Horizo​​ntalCenter 和 VerticalCenter 在 Spark (Flex 4) 中不起作用？

Question

下面的代码将屏幕分为左右两列。然后它在每列中放置一个框并尝试将它们居中。 Horizo​​ntalCenter 和 VerticalCenter 属性被忽略：

<?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"
               backgroundColor="blue">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:SkinnableContainer id="mainContentArea"
             top="100" bottom="100"
             backgroundColor="red">
        <s:layout>
            <s:ConstraintLayout>
                <s:constraintColumns>
                    <s:ConstraintColumn id="col1" width="{width/2}" />
                    <s:ConstraintColumn id="col2" width="{width/2}" />              
                </s:constraintColumns>                  
            </s:ConstraintLayout>
        </s:layout>
        <s:BorderContainer id="greenContainer"
                           backgroundColor="green"
                           width="400" height="300"
                           horizontalCenter="col1:0"
                           verticalCenter="0">
        </s:BorderContainer>    
        <s:BorderContainer id="yellowContainer"
                           backgroundColor="yellow"
                           width="200" height="150"
                           horizontalCenter="col2:0"
                           verticalCenter="0">
        </s:BorderContainer>        
    </s:SkinnableContainer>
</s:Application>

Answer 1

来自文档：

每个元素支持的约束有 left、right、top、bottom、
基线、percentWidth和percentHeight。元素的最小值和
最大尺寸将始终受到尊重。

因此，horizo​​ntalCenter 和 verticalCenter 不在支持的约束列表中。

我建议您使用以下代码：

<?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"
    backgroundColor="blue">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:SkinnableContainer id="mainContentArea"
        top="100" bottom="100"
        backgroundColor="red" left="0" right="0">
        <s:layout>
            <s:ConstraintLayout>
                <s:constraintColumns>
                    <s:ConstraintColumn id="col1" width="50%" />
                    <s:ConstraintColumn id="col2" width="50%" />              
                </s:constraintColumns>                  
            </s:ConstraintLayout>
        </s:layout>
        <s:Group left="col1:0" right="col1:0" top="0" bottom="0">
            <s:BorderContainer id="greenContainer"
                backgroundColor="green"
                width="400" height="300"
                horizontalCenter="0"
                verticalCenter="0">
            </s:BorderContainer>    
        </s:Group>
        <s:Group left="col2:0" right="col2:0" top="0" bottom="0">
            <s:BorderContainer id="yellowContainer"
                backgroundColor="yellow"
                width="200" height="150"
                horizontalCenter="0"
                verticalCenter="0">
            </s:BorderContainer>        
        </s:Group>
    </s:SkinnableContainer>
</s:Application>