[英]Flex formitem label aligment oddity
我已经向这个人致敬了
为什么在世界上,Label 1和Label 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>
错误或功能? 一个的标签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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.