3

我给这个发了一个体面的头发致敬
为什么在世界上，标签 1 和标签 2 有不同的垂直对齐方式？

        <s:Form width="100%">
            <s:FormHeading width="100%" label="Heading" />
            <s:FormItem width="100%" label="Label 1">
                <s:HGroup verticalAlign="bottom">
                    <s:Label text="Size" fontSize="40"/>
                    <s:Label text="Mb"/>                        
                </s:HGroup>
            </s:FormItem>
            <s:FormItem width="100%" label="Label 2">
                <s:HGroup verticalAlign="middle">
                    <s:VGroup horizontalAlign="center">
                        <s:Label text="Set1" />
                        <s:Label text="{this.set1}" fontSize="40"/>
                        <s:Label text="Days" />
                    </s:VGroup>
                    <s:Label text="+" fontSize="40" />
                    <s:VGroup horizontalAlign="center">
                        <s:Label text="Set2" />
                        <s:Label text="{this.set2}" fontSize="40" />
                        <s:Label text="Days" />
                    </s:VGroup>
                </s:HGroup>
            </s:FormItem>
        </s:Form>
4

1 回答 1

5

错误或功能？a 的标签与' 内容FormItem的基线对齐。FormItem一张图片说了一千多个字，所以我会告诉你会发生什么：

FormItem 基线

所以它原来是一个功能（感谢提出这个问题：我自己直到今天才知道这个）。

为了“修复”这个特性，你必须创建一个自定义皮肤：通过复制原始的spark.skins.spark.FormItemSkin. 找到名为;
的元素 labelDisplay它应该是这样的：

<s:Label id="labelDisplay"
         fontWeight="bold"
         left="labelCol:0" right="labelCol:5" 
         bottom="row1:10" baseline="row1:0"/>

看到那个baseline属性了吗？这就是导致不良行为的原因。
您可以简单地删除它；然后标签将始终与底部对齐。如果你想将它与垂直中心对齐，你可以像这样改变它：

<s:Label id="labelDisplay" fontWeight="bold" verticalAlign="middle"
         left="labelCol:0" right="labelCol:5" top="row1:10" bottom="row1:10"/>

现在您需要做的就是将您的自定义皮肤应用到您的 FormItem：

<s:FormItem skinClass="my.custom.FormItemSkin">

或者在更频繁使用的情况下：

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";

    s|FormItem.centeredLabel {
        skinClass: ClassReference("my.custom.FormItemSkin");
    }
</fx:Style>

<s:FormItem styleName="centeredLabel">
于 2012-11-13T14:16:01.233 回答