为什么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

来自the documentation：

  

每个元素支持的约束为left，right，top，bottom，   baseline，percentWidth和percentHeight。元素的最小值和   最大尺寸将始终得到尊重。

因此horizontalCenter和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>