为什么 HorizontalCenter 和 verticalCenter 在 Spark (Flex 4) 中不起作用？答案

【问题标题】：Why don't horizontalCenter and verticalCenter work in Spark (Flex 4)?为什么 HorizontalCenter 和 verticalCenter 在 Spark (Flex 4) 中不起作用？
【发布时间】：2011-08-29 15:52:51
【问题描述】：

下面的代码将屏幕分成左右两列。然后它在每列中放置一个框并尝试将它们居中。忽略水平中心和垂直中心属性：

<?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>

【问题讨论】：

标签： apache-flex flex-spark

【解决方案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>

【讨论】：

那么如何在 Spark 中实现相同的功能呢？为什么要改变？ MX 中的相同代码可以工作（使用 Canvas）。
我想您应该将Group 与left=right=top=bottom="0" 放在一起，并将您的控件与verticalCenter 和horizontalCenter 放在其中。我还没有回答问题的第二部分，因为我对 Adobe 的动机没有任何想法。
感谢您对此的关注。不确定我是否明白你的意思。您可以发布有效的编辑代码吗？不幸的是，不能将控件放在不同的组中。必须在同一个容器中交换它们，调整它们的大小，通过不同的状态转换它们。这两个框必须通过 ConstraintColumns 居中。同样，这适用于 MX。我正在尝试发布 MX 代码。
再次感谢您的关注。我已经走上了那条路。不幸的是，正如我所说，组件必须存在于同一组中。由于需要交换盒子，不同的组将无法工作。想象一下右上角的“反转”按钮，单击该按钮可反转框的位置。当盒子反转时，它们会平稳过渡到新的反转位置。如果组件位于不同的组中，则这些转换将不起作用。它们必须水平居中于 ColumnConstraint，而不是 Group 容器。我难住了。同样，我在 MX 中有这个工作。
为什么不使用过渡移动组？我理解您对 MX 的看法。但这是斯巴达，对不起，Spark。它是具有其他功能的其他组件。