Flex自定义按钮组件

Question

我希望我的自定义按钮看起来像下面的按钮示例。 更具体地说，我希望按钮的宽度由标签中最大单词的宽度（即在我的示例中为“拉长”的宽度）确定。 标签必须包装，而不是截断。 而且我只希望图标的顶部边缘和按钮的顶部边缘之间只有一个像素。 到目前为止，我已经尝试了很多方法，但无济于事。 我已经将horizo​​ntalGap和verticalGap减小为零，并将padding减小为零。 但是仍然没有。 请帮忙。

这是我现在所拥有的：

<mx:Button  top="0" cornerRadius="2" paddingLeft="0" paddingRight="0" leading="0" letterSpacing="0" paddingTop="0" paddingBottom="0" verticalGap="0" horizontalGap="0" textAlign="center" labelPlacement="bottom" icon="{MyIcon}" height="60" width="75" label="Elongated Label" fontSize="10" />

Answer 1

这一点都不简单。

您将需要创建自己的按钮，

public class Mybutton extends Button {...}

覆盖createChildren并将用于标签的IUITextField的自动换行设置为true。

覆盖度量并使用您自己的线度量来确定按钮应该的宽度。 如果您采取正确的措施，该按钮将正确布局。

Answer 2

我目前没有开发环境，但是应该遵循以下原则：

1. 将Label的truncateToFit属性设置为false（或使用将wordWrap设置为true的TextField-我认为这应将单词尽可能地保持在一起）。

我还不需要使用以上任何一种方法，希望您还没有尝试过使用它们，因为这将是解决部分问题的简便方法。 没有任何代码，我不确定为什么填充不起作用，但可能与截断一词有关。

或者，为什么不使用Button ，为图标嵌入或指定源，并通过指定对象的labelPlacement属性来决定将文本放置在何处？

编辑：由于Button中没有关于wordWrap的属性，正如他们在Adobe Flex论坛中建议的那样，针对基于没有自动功能的内容进行大小调整的此类问题，您必须找到最长的单词并调整宽度按钮（即：creationComplete事件中）。 尝试找到字体与像素的比率是我最好的选择（或者您可以使用等宽字体，其中所有字符都被赋予相同的空格，从而简化了估算）：

creationComplete="event.target.width=returnMyWidth();"

至于填充，它可能与您设置的自定义宽度有关，也可能是由于嵌入图像而被自动包含在内而设置的-我不确定，因此，如果有人可以提供根据此经验发表评论。