VerticalCenter没有按预期工作?

时间:2011-04-22 22:43:35

标签: flex flex4

我一直在玩Flex中的组内部布局一些简单的形状,我似乎能够构建一个场景,其中verticalCenter不能完美地将事情集中在一起。如果您运行下面的片段并将HSlider向左移动,您应该能够注意到菱形并不总是相对于Rect垂直居中。当你到达钻石略大于矩形时,这一点尤为明显 - 在这种情况下,底部尖端伸出而顶部钻头没有伸出。

我做了一些可怕的错误,或者我只是在打击像素分辨率?还有什么?

会喜欢任何建议!

谢谢。

POST EDIT:添加另一个更简单的示例,再次显示这一点。看起来像像素分辨率给我......

---- main.mxml ---

<?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" width="400" height="300">

    <s:Group height="{hs.value}" width="80" verticalCenter="0" horizontalCenter="0">
        <s:Rect height="100%" width="100%">
            <s:fill>
                <s:SolidColor color="0x787878"/>
            </s:fill>
        </s:Rect>
        <local:diamond verticalCenter="0" height="100%"/>
    </s:Group>
    <s:HSlider maximum="40" value="30" id="hs"/>
</s:Application>

---- diamond.mxml ------

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:Group height="100%" verticalCenter="0" scaleY="0.70">
        <s:Path verticalCenter="0"
                data="M 7.847 19.31 
                L 7.842 19.312 
                L 0 11.47 
                L 11.468 0 
                L 15.107 3.64 
                L 15.112 3.638 
                L 22.94 11.467 
                L 11.472 22.935 
                L 7.847 19.31 Z" >
            <s:fill>
                <s:LinearGradient rotation="90" scaleX="49.3475" x="11.47" y="-0.308">
                    <s:GradientEntry color="#FFD500" ratio="0"/>
                    <s:GradientEntry color="#F5A106" ratio="1"/>
                </s:LinearGradient>
            </s:fill>
        </s:Path>
    </s:Group>
</s:Group>

--------------------------新例子------------------- ---

<?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="600" minHeight="400">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Group horizontalCenter="0" verticalCenter="0" width="80" height="40">
        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:SolidColor color="0xdddddd"/>                
            </s:fill>
        </s:Rect>

        <s:Rect height="33" width="80" verticalCenter="0">
            <s:fill>
                <s:SolidColor color="0xFFFF99"/>
            </s:fill>
        </s:Rect>
    </s:Group>
</s:Application>

内部矩形在外部矩形中不是垂直居中的。

2 个答案:

答案 0 :(得分:0)

在本声明中

<testVerticalCenter:diamond verticalCenter="0" height="100%"/>

您如何定义命名空间testVerticalCenter?

答案 1 :(得分:0)

在你的上一个例子中,你有一个40像素的高组,其中有一个33像素的高矩形,其间有7个像素需要除以2(3.5)的顶部和底部。

Flex,不喜欢Flash,围绕所有位置编号,以获得更好的文本可读性和布局。如果你要将内部矩形高度更改为32,它将完美居中。

基本上,不使用小数位置