将 DateField 图标放在其 TextInput 字段的左侧

发布于 2024-10-27 21:43:59 字数 93 浏览 7 评论 0原文

关于日期字段,有TextInput 和Icon。我希望图标出现在 TextInput 的左侧,而不是像默认状态那样出现在右侧。

有人能给我关于这个的提示吗?

Regarding the dateField, there is the TextInput and the Icon. I want the icon to appear on the left side of the TextInput instead of it appearing on the right side as it is in the default state.

Can somebody give me a hint about this one?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

许久 2024-11-03 21:43:59

由于 DateField 仍然是 Halo 组件,因此您需要扩展它才能更改其子组件。您需要创建一个新组件,扩展 DateField,然后重写 createChildren 和 updateDisplayList 函数。检查 DateField 如何创建其子项并相应地更改它们的位置。 updateDisplayList 函数适用于组件调整大小时,以便您可以正确调整子组件的大小。

Since DateField is still a Halo component, you need to extend it to be able to change its children. You'll want to create a new component, extend DateField and then override the createChildren and updateDisplayList functions. Check how the DateField creates it's children and change their location accordingly. The updateDisplayList function is for when the component resizes so you can resize the children properly.

陈独秀 2024-11-03 21:43:59

请查看此处(请参阅源代码)。有一个自动建议组件,但原理是一样的。或者这应该足够了:

public class myDateField extends DateField
{
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth,unscaledHeight);
        this.textInput.x=this.getChildAt(1).width;
        this.getChildAt(1).x = 0;
    }       
}

Look here (see source code). There is an autosuggest component, but the principle is the same. Or this should be enough:

public class myDateField extends DateField
{
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth,unscaledHeight);
        this.textInput.x=this.getChildAt(1).width;
        this.getChildAt(1).x = 0;
    }       
}
与酒说心事 2024-11-03 21:43:59

这就是我所做的 - 与 J_A_X 描述的解决方案相同,但使用代码,因为我认为如果您不熟悉 ActionScript,Adobe 设置位置的方式有点令人困惑。我喜欢 ChRapO 的方法,但我选择尝试与 MX DateField 组件设置这些元素的位置的方式保持一致。

我的扩展 DateField 类:

package com.escalationpoint.tagger.view.component
{
import mx.controls.DateField;
import mx.core.mx_internal;

use namespace mx_internal;


public class DateField extends mx.controls.DateField
{
    public function DateField()
    {
        super();
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        // Unfortunate that we can't call super.super.updateDisplayList
        // since we're redoing work done in super.updateDisplayList.  Oh, well...
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        var w:Number = unscaledWidth;
        var h:Number = unscaledHeight;

        var arrowWidth:Number = downArrowButton.getExplicitOrMeasuredWidth();
        var arrowHeight:Number = downArrowButton.getExplicitOrMeasuredHeight();

        textInput.setActualSize(w - arrowWidth - 2, h);
        textInput.move(arrowWidth + 4, 0);

        downArrowButton.setActualSize(arrowWidth, arrowHeight);
        downArrowButton.move(0, Math.round((h - arrowHeight) / 2));
    }
    }
}

与原始 DateField 组件中的 updateDisplayList 方法相比:

override protected function updateDisplayList(unscaledWidth:Number,
                                              unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    var w:Number = unscaledWidth;
    var h:Number = unscaledHeight;

    var arrowWidth:Number = downArrowButton.getExplicitOrMeasuredWidth();
    var arrowHeight:Number = downArrowButton.getExplicitOrMeasuredHeight();

    downArrowButton.setActualSize(arrowWidth, arrowHeight);
    downArrowButton.move(w - arrowWidth, Math.round((h - arrowHeight) / 2));

    textInput.setActualSize(w - arrowWidth - 2, h);
}

Here's what I did - same solution described by J_A_X, but with code, cuz I think the way Adobe is setting position is a little confusing if you're new to ActionScript. I like ChRapO's approach, but I chose to try to be consistent with the way the MX DateField component sets position of these elements.

My extended DateField class:

package com.escalationpoint.tagger.view.component
{
import mx.controls.DateField;
import mx.core.mx_internal;

use namespace mx_internal;


public class DateField extends mx.controls.DateField
{
    public function DateField()
    {
        super();
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        // Unfortunate that we can't call super.super.updateDisplayList
        // since we're redoing work done in super.updateDisplayList.  Oh, well...
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        var w:Number = unscaledWidth;
        var h:Number = unscaledHeight;

        var arrowWidth:Number = downArrowButton.getExplicitOrMeasuredWidth();
        var arrowHeight:Number = downArrowButton.getExplicitOrMeasuredHeight();

        textInput.setActualSize(w - arrowWidth - 2, h);
        textInput.move(arrowWidth + 4, 0);

        downArrowButton.setActualSize(arrowWidth, arrowHeight);
        downArrowButton.move(0, Math.round((h - arrowHeight) / 2));
    }
    }
}

Compare to the updateDisplayList method in the original DateField component:

override protected function updateDisplayList(unscaledWidth:Number,
                                              unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    var w:Number = unscaledWidth;
    var h:Number = unscaledHeight;

    var arrowWidth:Number = downArrowButton.getExplicitOrMeasuredWidth();
    var arrowHeight:Number = downArrowButton.getExplicitOrMeasuredHeight();

    downArrowButton.setActualSize(arrowWidth, arrowHeight);
    downArrowButton.move(w - arrowWidth, Math.round((h - arrowHeight) / 2));

    textInput.setActualSize(w - arrowWidth - 2, h);
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文