Flex：組合框的自定義項目渲染器控件將截斷文本

Question

我已經實現了一個自定義項目渲染器，該項目渲染器正在與我正在處理的Flex項目上的組合框一起使用。 它顯示每個項目的圖標和一些文本。 唯一的問題是，當文本較長時，菜單的寬度不能正確調整，顯示時文本將被截斷。 我曾嘗試調整所有明顯的屬性來緩解此問題，但均未成功。 有誰知道如何使組合框菜單的寬度適當地縮放以使其呈現任何數據？

我的自定義項目渲染器實現是：

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
    styleName="plain" horizontalScrollPolicy="off"> 

    <mx:Image source="{data.icon}" />
    <mx:Label text="{data.label}" fontSize="11" fontWeight="bold" truncateToFit="false"/>

</mx:HBox>

我的組合框像這樣使用它：

    <mx:ComboBox id="quicklinksMenu" change="quicklinkHandler(quicklinksMenu.selectedItem.data);" click="event.stopImmediatePropagation();" itemRenderer="renderers.QuickLinkItemRenderer" width="100%"/>

編輯：我應該澄清的事情：我可以將組合框上的dropdownWidth屬性設置為任意大的值-這將使所有內容都適合，但它會太寬。 由於此組合框中顯示的數據是通用的，因此我希望它自動將其自身大小調整為數據提供程序中的最大元素（flex文檔說它將做到這一點，但是我感到我的自定義項目渲染器某種程度上破壞了該行為）

Answer 1

只是一個隨機的想法（不知道是否有幫助）：

嘗試將父級HBox和Label的寬度設置為100％。 這通常可以解決我遇到的任何類似問題。

Answer 2

您是否嘗試過使用calculatePreferredSizeFromData（）方法？

protected override function calculatePreferredSizeFromData(count:int):Object

Answer 3

您將需要做兩件事：

• 對於文本，請使用mx.controls.Text （支持文本換行）而不是mx.controls.Label
• 設置comboBox的dropdownFactory.variableRowHeight=true true-此dropdownFactory通常是List的子類，您在ComboBox上設置的itemRenderer將用於呈現列表中的每個項目

而且，這樣做沒有明確設置comboBox.dropdownWidth -讓我們的默認值comboBox.widt ^ h作為下拉列表的寬度。

Answer 4

這個答案可能為時已晚，但是我對DataGrid的列寬有一個非常相似的問題。

經過大量的整理之后，我決定在私有TextField中預渲染文本，從中獲取渲染文本的寬度，並在所有適當的調整大小類型事件上顯式設置列的寬度。 有點駭人聽聞，但如果您沒有太多更改數據，則效果很好。

Answer 5

如果您看一下mx.controls.ComboBase的measure方法，您會看到comboBox計算它的measuredMinWidth是文本寬度和comboBox按鈕的寬度之和。

    // Text fields have 4 pixels of white space added to each side
    // by the player, so fudge this amount.
    // If we don't have any data, measure a single space char for defaults
    if (collection && collection.length > 0)
    {
        var prefSize:Object = calculatePreferredSizeFromData(collection.length);

        var bm:EdgeMetrics = borderMetrics;

        var textWidth:Number = prefSize.width + bm.left + bm.right + 8;
        var textHeight:Number = prefSize.height + bm.top + bm.bottom 
                    + UITextField.TEXT_HEIGHT_PADDING;

        measuredMinWidth = measuredWidth = textWidth + buttonWidth;
        measuredMinHeight = measuredHeight = Math.max(textHeight, buttonHeight);
    }

@defmeta（在mx.controls.ComboBox實現）提到的calculatePreferredSizeFromData方法假定數據渲染器只是一個文本字段，並使用flash.text.lineMetrics從data對象中的標簽字段計算文本寬度。 如果你想一個額外的視覺元素添加到項目渲染器，並具有ComboBox取它的大小考慮計算它自己的大小的時候，你將不得不延長mx.controls.ComboBox類並覆蓋calculatePreferredSizeFromData方法如下所示：

  override protected function calculatePreferredSizeFromData(count:int):Object
  {
      var prefSize:Object = super.calculatePrefferedSizeFromData(count);
      var maxW:Number = 0;
      var maxH:Number = 0;
      var bookmark:CursorBookmark = iterator ? iterator.bookmark : null;
      var more:Boolean = iterator != null;

      for ( var i:int = 0 ; i < count ; i++)
      {
          var data:Object;
          if (more) data = iterator ? iterator.current : null;
          else data = null;
          if(data)
          {
              var imgH:Number;
              var imgW:Number;

              //calculate the image height and width using the data object here

              maxH = Math.max(maxH, prefSize.height + imgH);
              maxW = Math.max(maxW, prefSize.width + imgW);
          }
          if(iterator) iterator.moveNext();
      }

      if(iterator) iterator.seek(bookmark, 0);
      return {width: maxW, height: maxH};
 }

如果可能的話，將圖像尺寸存儲在數據對象中，並將這些值用作imgH和imgW ，這將使尺寸調整變得更加容易。

編輯：

如果要在圖像之外向渲染器添加元素（如標簽），則在遍歷數據元素時還必須計算其大小，並在計算maxH和maxW時將這些尺寸考慮maxW 。