Question

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

这是皮肤：

<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

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

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

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

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

Answer 2

你皮肤中的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旁边，并在中间垂直对齐。

如何让我的柔性火花皮垂直居中？

2 个答案: