spark.components.List 的多行 itemRenderer - 带有测试用例和屏幕截图 [英] Multilined itemRenderer for a spark.components.List - with test case and screenshot

问题描述

在下面的简单 Flex 4 Web 应用程序中 -

In the simple Flex 4 web application below -

是否可以更改自定义项渲染器 MyRenderer，使其包含太长的行?

is it possible to change the custom item renderer MyRenderer, so that it wraps the too long lines?

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:

我需要与 创建行高可变的多行列表行 博客 - 但对于 spark.components.List 不再具有 wordWrap 属性.

I need same as in the Creating multi-line list rows with variable row heights blog - but for the spark.components.List which doesn't have the wordWrap property anymore.

更新 3:

实际上在 RIAStar 回答了我的问题之后(谢谢！)，我的问题才刚刚开始 - 当我现在调用 myList.ensureIndexIsVisible(MONTHS.length - 1); 它并没有真正滚动到底部.

Actually after RIAStar answered my question (thanks!), my problems have just started - when I now call the myList.ensureIndexIsVisible(MONTHS.length - 1); it doesn't really scroll to the bottom.

我准备了一个新问题:带有多行(自动换行)项目渲染器的列表 - 如何滚动到底部?附测试用例和截图

推荐答案

您可以使用 VerticalLayout 的 variableRowHeight 属性.像这样:

You can use VerticalLayout's variableRowHeight property for that. Something like this:

<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 中的 Label 可以占据它想要的所有水平空间.你应该限制它的width.例如:

Furthermore, the Label in your ItemRenderer can take up all the horizontal space it wants. You should constrain its width. For example:

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

这篇关于spark.components.List 的多行 itemRenderer - 带有测试用例和屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！