如何让我的 flex spark 皮肤垂直居中？

Question

我创建了一个皮肤，允许我在火花按钮上有两个标签，但按钮文本不会垂直居中。无论我给它什么设置，它都停留在按钮的顶部。但是，皮肤中的图标确实是垂直居中的。

这是皮肤：

<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
         minWidth="82" minHeight="82" 
         alpha.disabled="0.5" initialize="autoIconManagement=false">
<fx:Metadata>[HostComponent("com.XXXX.components.TwoLineButton")]</fx:Metadata>

<!-- states -->
<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states>

<s:Image source="{getStyle('upSkin')}" 
         source.over="{getStyle('overSkin')}" 
         source.down="{getStyle('downSkin')}" 
         source.disabled="{getStyle('disabledSkin')}" 
         width="100%" height="100%"
         />

<s:HGroup verticalAlign="middle" height="100%" width="100%"
          paddingLeft="{getStyle('paddingLeft')}" 
          paddingRight="{getStyle('paddingRight')}" 
          paddingTop="{getStyle('paddingTop')}" 
          paddingBottom="{getStyle('paddingBottom')}"
          gap="{getStyle('horizontalGap')}" 
          verticalCenter="0">

    <s:BitmapImage id="iconDisplay" includeInLayout="{iconDisplay.source}"/>

    <s:VGroup gap="{getStyle('verticalGap')}" height="100%" width="100%">
        <s:Label id="labelDisplay"
                 textAlign="center"
                 width="100%"
                 maxDisplayedLines="1"
                 horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
                 left="10" right="10" top="2" bottom="2">
        </s:Label>

        <s:Label id="bottomLabelDisplay"
                 textAlign="center"
                 width="100%"
                 maxDisplayedLines="1"
                 horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
                 left="10" right="10" top="2" bottom="2">
        </s:Label>
    </s:VGroup>
</s:HGroup>

这是我调用它的代码：

<components:TwoLineButton
                width="308"
                label="TopLabel"
                bottomLabel="Bottom label"
                click="handleButtonClick(event)"
                />

我尝试让 HGroup 使用硬编码的高度值，但这也不起作用。

提前致谢。

Answer 1

你皮肤中的HGroup 应该是这样的：

<s:HGroup verticalAlign="middle" height="100%" width="100%"
          paddingLeft="{getStyle('paddingLeft')}" 
          paddingRight="{getStyle('paddingRight')}" 
          paddingTop="{getStyle('paddingTop')}" 
          paddingBottom="{getStyle('paddingBottom')}"
          gap="{getStyle('horizontalGap')}" >

    <s:BitmapImage id="iconDisplay" includeInLayout="{iconDisplay.source}"/>

    <s:VGroup gap="{getStyle('verticalGap')}" width="100%" verticalAlign="middle" >
        <!-- not sure if you need 100% width here -->
        <s:Label id="labelDisplay"
                 textAlign="center"
                 width="100%"
                 maxDisplayedLines="1">
        </s:Label>

        <s:Label id="bottomLabelDisplay"
                 textAlign="center"
                 width="100%"
                 maxDisplayedLines="1">
        </s:Label>
    </s:VGroup>
</s:HGroup>

您的标签位于VGroup 中，因此verticalCenter、horizontalCenter、top、left 等属性不适用。这些属性仅适用于BasicLayout（绝对定位布局）。

我还删除了包含标签的 VGroup 上的 100% 高度。这意味着标签组的高度只有需要的高度（所以现在我们可以将其居中）。

最后，将verticalAlign="middle" 添加到VGroup。由于该组的父组是 HGroup，因此 VGroup 应水平放置在 BitmapImage 旁边（如果存在），并垂直居中对齐。

Answer 2

您不能在像 VerticalLayout 这样的相对布局中使用绝对约束，例如“x”、“y”、“left”、“right”、“top”、“bottom”、“horizo​​ntalCenter”、“verticalCenter”…… （VGroup 只是一个带有 VerticalLayout 的组）。这是有道理的，因为您不能相对和绝对地定位某些东西。在这种情况下，容器的布局优先于您对子组件施加的任何约束。这意味着您可以简单地删除其中的任何这些约束：它们根本没有任何效果。

'verticalAlign' 也是一种应用于容器的样式，但它告诉容器如何布局其子级。您已将其分配给标签，因此您说的是“在标签组件中间布置标签内的文本组件”而不是“在 VGroup 中间布置标签组件”。所以这个也是多余的。

以下内容应该可以解决您的问题：

<s:VGroup height="200">
    <s:Label text="A" height="50%" verticalAlign="middle" />
    <s:Label text="B" height="50%" verticalAlign="middle" />
</s:VGroup>

或者如果您希望两个标签在 VGroup 中间组合在一起（从描述中看不出您想要哪一个）：

<s:VGroup height="200" verticalAlign="middle">
    <s:Label text="A" />
    <s:Label text="B" />
</s:VGroup>