当 popUpWidthMatchesAnchorWidth 为 FALSE 时，将下拉列表向右对齐

发布于 2024-11-15 15:26:43 字数 800 浏览 5 评论 0 原文

我已经为 DropDownList “创建”了一个自定义外观（即修改了默认的 spark.skins.spark.DropDownListSkin）及其按钮的 spark.skins.spark.DropDownListButtonSkin 。

我已经能够让它做几乎所有我想做的事情，除了让下拉列表与按钮右侧对齐之外。在按钮子皮肤中设置允许列表由项目的宽度确定，因为显然按钮/整个控件的宽度远远低于要求。

这是现在的样子（默认 popUpPosition="bottom"）

popUpPosition=

设置 popUpPosition="right “

popUpPosition=

这是我想要的看起来像

Imagined

所以在这一点上，我要么需要深入研究所有的 Spark 源代码让 DropDownList 更好地理解事情是如何工作的，或者也许这里有人已经知道如何做到这一点。

任何想法将不胜感激。

原文

分享到QQ

分享到微博

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

发布评论

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

夜吻♂芭芘 2024-11-22 15:26:43

您可以创建一个从 PopUpAnchor 扩展的自定义 PopUpAnchor 类，并重写其确定位置函数以修改 PopUpPosition.BELOW 的行为方式：

override mx_internal function determinePosition(placement:String,
  popUpWidth:Number, popUpHeight:Number,matrix:Matrix,
  registrationPoint:Point, bounds:Rectangle):void
{
  switch(placement)
  {
    case PopUpPosition.BELOW:
      registrationPoint.x = -popUpWidth + unscaledWidth;
      registrationPoint.y = unscaledHeight;
      break;
    case PopUpPosition.ABOVE:
      registrationPoint.x = 0;
      registrationPoint.y = -popUpHeight;
      break;
    case PopUpPosition.LEFT:
      registrationPoint.x = -popUpWidth;
      registrationPoint.y = 0;
      break;
    case PopUpPosition.RIGHT:
      registrationPoint.x = unscaledWidth;
      registrationPoint.y = 0;
      break;            
    case PopUpPosition.CENTER:
      registrationPoint.x = (unscaledWidth - popUpWidth) / 2;
      registrationPoint.y = (unscaledHeight - popUpHeight) / 2;
      break;            
    case PopUpPosition.TOP_LEFT:
      // already 0,0
      break;
  }
}

设置 RegistrationPoint.x = -popUpWidth + unscaledWidth 将其与按钮的右边缘对齐。

在您的 DropDownList 皮肤中，将 PopUpAnchor 标记替换为您新创建的类，您应该拥有一个按照您的请求运行的 DropDownList 。

也许有一种更明智的方法可以做到这一点，但我宁愿花时间不去弄清楚那是什么。

You can create a custom PopUpAnchor class which extends from PopUpAnchor, and override its determinePosition function to modify how PopUpPosition.BELOW behaves:

override mx_internal function determinePosition(placement:String,
  popUpWidth:Number, popUpHeight:Number,matrix:Matrix,
  registrationPoint:Point, bounds:Rectangle):void
{
  switch(placement)
  {
    case PopUpPosition.BELOW:
      registrationPoint.x = -popUpWidth + unscaledWidth;
      registrationPoint.y = unscaledHeight;
      break;
    case PopUpPosition.ABOVE:
      registrationPoint.x = 0;
      registrationPoint.y = -popUpHeight;
      break;
    case PopUpPosition.LEFT:
      registrationPoint.x = -popUpWidth;
      registrationPoint.y = 0;
      break;
    case PopUpPosition.RIGHT:
      registrationPoint.x = unscaledWidth;
      registrationPoint.y = 0;
      break;            
    case PopUpPosition.CENTER:
      registrationPoint.x = (unscaledWidth - popUpWidth) / 2;
      registrationPoint.y = (unscaledHeight - popUpHeight) / 2;
      break;            
    case PopUpPosition.TOP_LEFT:
      // already 0,0
      break;
  }
}

Setting registrationPoint.x = -popUpWidth + unscaledWidth aligns it with the right edge of the button.

Within your DropDownList skin replace the PopUpAnchor tag with your newly created class and you should have a DropDownList which behaves as you requested.

Perhaps there's a saner way of doing this, but I'd rather spend my time not finding out what that is.

回复收藏 0 原文