爲什麼在Spark（Flex 4）中horizo​​ntalCenter和verticalCenter不工作？

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。 Element的最小尺寸和 最大尺寸將始終受到尊重。

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