Flex 截断按钮标签答案

【问题标题】：Flex Truncating Button LabelsFlex 截断按钮标签
【发布时间】：2010-10-05 20:34:45
【问题描述】：

首先，对于这个问题的含糊之处，我深表歉意。在这一点上，我只是想尝试一些新的想法来尝试诊断这个错误。

无论如何，我遇到的问题是使用自定义模块加载器的应用程序。该模块加载器已被编译为 swc，并且模块加载器正在通过其命名空间进行实例化。这一切都很好。我遇到的问题特定于模块中使用的 mx:button 控件。无论出于何种原因，它们的标签都被截断了，例如，Sign In 显示为省略号，如 Sign ...

经过相当多的鬼混，我已经能够确定以下内容：

这个问题似乎只发生在模块内。如果在主 mxml 中使用按钮控件，则标签不会被截断。
标签被截断的按钮控件没有指定宽度（将其宽度设置为 100% 或特定像素宽度不能解决问题）
按钮控件使用默认填充（通过将左右设置为 5 或任何其他值来弄乱填充也无济于事）。
我们没有使用任何嵌入字体，所以我也排除了这种可能性。
mx:CheckBox 和 mx:LinkButton 同样受到此问题的影响，尽管 mx:CheckBox 似乎也不想显示其复选框，它只显示截断的标签。

这样做的一个潜在副作用是，将数据提供程序附加到 mx:ComboBox 会导致组合框控件引发绘图错误，但我不完全确定它与上述问题有关。

我在网上寻找答案时确实发现了一件有趣的事情，其中提到了 fontContext 及其与 IFlexModuleFactory 的关系。在我们的 moduleloader 实现中没有 fontContext 规范，所以我不完全确定这是否是问题所在。无论如何，如果有人有任何想法，将不胜感激。另一方面，如果你确切地知道是什么让我感到不适并且可以为我提供答案，我可能会兴奋地弄湿自己。晚了。我累了。我需要我的 Flex 应用才能玩得开心。

提前致谢，

--安妮

编辑：为了澄清我在寻找这个问题，我真的只需要知道以下几点：

这个问题可能是由命名空间冲突引起的吗？
如果没有实现 CSS，还有什么可能会覆盖标签的默认行为？
有没有人在使用模块加载器的自定义实现时遇到继承丢失的问题？
有没有人在使用或不使用模块加载器的情况下遇到此问题或类似问题？

我没有与这个问题共享任何代码，只是因为我必须共享整个应用程序，不幸的是，我不能这样做。再说一次，我不是在寻找最终的解决方案，我只是在寻找一些事情的建议，如果有人有任何想法的话。

【问题讨论】：

您可能必须分享代码才能为我们提供帮助。这可能吗？

标签： apache-flex

【解决方案1】：

一年来，我一直在以各种形式断断续续地处理这个问题，虽然我还没有弄清楚是什么导致了这个问题，但很明显在某个地方发生了错误测量。

不过，我能够解决这个问题，主要是通过子类化按钮类型控件（在我的情况下为 Button、LinkButton、PopUpButton 等）并为其分配 UITextField 的 textField 成员实例truncateToFit 元素在所有情况下都返回 false 的扩展：

public class NonTruncatingUITextField extends UITextField
{
    public function NonTruncatingUITextField ()
    {
        super();
    }

    override public function truncateToFit(s:String = null):Boolean
    {
        return false;
    }
}

自定义组件只是扩展了 Button（或任何其他按钮类型的控件是罪魁祸首——我自己创建了六个左右，每种类型的控件一个），但使用 NonTruncatingTextField作为其标签，由组件用户指定：

public class NonTruncatingButton extends Button
{
    private var _truncateLabel:Boolean;

    public function NonTruncatingButton()
    {
        super();

        this._truncateLabel = true;
    }

    override protected function createChildren():void
    {
        if (!textField)
        {
            if (!_truncateLabel)
                textField = new NonTruncatingUITextField();
            else
                textField = new UITextField();

            textField.styleName = this;

            addChild(DisplayObject(textField));
        }

        super.createChildren();
    }

    [Inspectable]
    public function get truncateLabel():Boolean
    {
        return this._truncateLabel;
    }

    public function set truncateLabel(value:Boolean):void
    {
        this._truncateLabel = value;    
    }   
}

...所以最后，在您的 MXML 代码中，您将引用自定义组件（在这种情况下，我告诉控件永远不要截断其标签）：

<components:NonTruncatingButton id="btn" label="Click This" truncateLabel="false" />

我同意这感觉像是一种解决方法，组件架构应该更优雅地处理所有这些，这可能是我们都忽略的事情，但它确实有效；希望它会在您寻找更明确的解决方案时解决您的问题。（虽然就个人而言，我按原样使用它，并且我已经转移到其他事情上——时间最好花在其他地方！）

祝你好运——让我知道结果如何。

【讨论】：

非常感谢您的解决方法。到目前为止，我们还不需要它，但这纯粹是因为我们完全重新设计了自定义 moduleLoader 实现。尽管如此，我们仍然会在更高分辨率 (1600x900) 下遇到截断标签，因此这绝对是一个奇怪的指标问题。

【解决方案2】：

我使用了自定义按钮和链接按钮类解决方案，但仍然遇到问题 - 但找到了一个每次都对我有用的解决方法。

创建一个包含您要用于标签的字体的 css 样式。请务必在文本选择下拉菜单下选中“嵌入此字体”。返回并将样式应用到您的按钮（或您的自定义按钮，具体取决于您将您的声音撞到这面特定的墙壁多长时间），瞧！

或者应该是瞧...

【讨论】：

【解决方案3】：

我刚刚遇到这个问题并以这种方式解决：

<mx:LinkButton label="Some label"
    updateComplete="event.target.mx_internal::getTextField().text = event.target.label"
/>;

【讨论】：

【解决方案4】：

通过将 labelPlacement 设置为“底部”，我成功地防止了 Flex 的错误按钮标签截断，如下所示：

theButton.labelPlacement = ButtonLabelPlacement.BOTTOM;

设置标签位置似乎无助于防止某些较宽按钮尺寸被截断，但在许多情况下它对我有用。

在您不能使用底部对齐按钮标签的情况下（例如当您的按钮具有水平对齐的图标时），janusz 的方法似乎也有效。这是 janusz 在 ActionScript 而不是 MXML 中的 .text 重新分配技术的一个版本：

theButton.addEventListener(FlexEvent.UPDATE_COMPLETE, function (e:FlexEvent):void {
  e.target.mx_internal::getTextField().text = e.target.label;
});

上述代码需要先导入mx_internal和FlexEvent，如下：导入 mx.events.FlexEvent；导入 mx.core.mx_internal;

这是结果……

之前（尽管水平空间充足，但请注意截断）：

之后：

这种方法的唯一缺点是省略号，但在我的情况下，我认为这是一个受欢迎的功能。

【讨论】：