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%"/>