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

【问题标题】：Put DateField Icon to Left on its TextInput field将 DateField 图标放在其 TextInput 字段的左侧
【发布时间】：2023-03-28 07:38:01
【问题描述】：

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

有人可以给我关于这个的提示吗？

【问题讨论】：

标签： apache-flex flex4 datefield

【解决方案1】：

由于 DateField 仍然是 Halo 组件，因此您需要对其进行扩展以更改其子级。您需要创建一个新组件，扩展 DateField，然后覆盖 createChildren 和 updateDisplayList 函数。检查 DateField 如何创建它的孩子并相应地更改它们的位置。 updateDisplayList 函数用于当组件调整大小时，您可以正确调整子组件的大小。

【讨论】：

我没有使用自定义组件的经验。您能否帮我编写一些代码并指导我创建所需的 DateField。谢谢
所以，你实际上是在要求我为你做这件事？我给了你你需要的细节，现在去研究和学习。我不是来牵你的手，我是来为你指明正确的方向。
覆盖 updateDisplayList 完成了任务。我在方法中有以下内容：downArrowButton.move(x,y);然而，目前我正在硬编码 x 和 y 值。将尝试使用组件的高度和宽度并进行一些数学计算并显示图标。

【解决方案2】：

看here（见源代码）。有一个自动建议组件，但原理是一样的。或者这应该足够了：

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;
    }       
}

【讨论】：

【解决方案3】：

这就是我所做的 - 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);
}

【讨论】：