Multilined的itemRenderer用於spark.components.List - 與測試案例和屏幕截圖

Question

在簡單的Flex 4個Web應用以下 -

是它可以改變自定義項目渲染MyRenderer，以便它包裝太長的線？

TestApp.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"> 

    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayList; 

      private static const MONTHS:ArrayList = new ArrayList([ 
       "1 January is a beautyful month", 
       "2 February is a beautyful month", 
       "3 March is a beautyful month", 
       "4 April is a beautyful month", 
       "5 May is a beautyful month", 
       "6 June is a beautyful month", 
       "7 July is a beautyful month", 
       "8 August is a beautyful month", 
       "9 September is a beautyful month", 
       "10 October is a beautyful month", 
       "11 November is a beautyful month", 
       "12 December is a beautyful month" 
      ]); 
     ]]> 

    </fx:Script> 

    <s:List id="myList" 
      width="60" 
      dataProvider="{MONTHS}" 
      itemRenderer="MyRenderer" /> 
</s:Application> 

MyRenderer.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<s:ItemRenderer 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    autoDrawBackground="false"> 

    <fx:Script> 
     <![CDATA[  
      [Bindable] 
      public var myColor:uint = 0xFFFFFF; 

      override public function set label(value:String):void 
      { 
       super.label = value; 
       labelDisplay.text = label; 

      // var list:List = owner as List; 
      // if (list) 
       // labelDisplay.width = list.width; 

       if (label.indexOf("June") >= 0) 
        myColor = 0xFF0000; 
       else if (label.indexOf("July") >= 0) 
        myColor = 0x00FF00; 
       else if (label.indexOf("August") >= 0) 
        myColor = 0x0000FF; 
       else 
        myColor = 0xFFFFFF; 
      } 
     ]]> 
    </fx:Script> 

    <s:Rect width="100%" height="100%"> 
     <s:fill> 
      <s:SolidColor color="{myColor}" /> 
     </s:fill> 
    </s:Rect> 

    <s:Label id="labelDisplay" /> 
</s:ItemRenderer> 

更新2：

我需要一樣在Creating multi-line list rows with variable row heights博客 - 但對於wh。spark.components.List wh ich不再有wordWrap屬性。

更新3：

後實際RIAStar回答我的問題（！謝謝），我的問題纔剛剛開始 - 當我現在請myList.ensureIndexIsVisible(MONTHS.length - 1);它並沒有真正滾動至底部。

我已經準備了一個新的問題：List with multilined (word wrapping) item renderer - how to scroll to the bottom? With test case and screenshots

Answer 1

您可以使用VerticalLayout的variableRowHeight屬性這一點。像這樣：

<s:List id="myList" width="60" dataProvider="{MONTHS}" itemRenderer="MyRenderer"> 
    <s:layout> 
     <s:VerticalLayout variableRowHeight="true" 
          horizontalAlign="justify" 
          requestedMinRowCount="5"/> 
    </s:layout> 
</s:List> 

此外，您的ItemRenderer中的標籤可以佔用它想要的所有水平空間。你應該限制它的width。例如：

<s:Label width="100%"/>