spark.components.List的Multilined itemRenderer - 带有测试用例和截图 [英] Multilined itemRenderer for a spark.components.List - with test case and screenshot
问题描述
是否可以更改自定义项目渲染器 MyRenderer
,以便它包装太长的行?
TestApp.mxml:
<?xml version =1.0encoding =utf-8?>
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;
$ b $ private static const MONTHS:ArrayList = new ArrayList([
1月1日是一个美丽的月份,
2月2日是一个美丽的月份,
3月3日是一个美丽的月份,
4月4日是一个美丽的月份,
5月5日是一个美丽的月份,
6月6日是一个美丽的月份 b7月7日是个美丽的月份,
8月8日是一个美丽的月份,
9月9日是个美丽的月份,
10月10日是一个美丽的月份 b $ b11月11日是个美丽的月份,
12月12日是一个美丽的月份
);
]]>
< / fx:Script>
< s:List id =myList
width =60
dataProvider ={MONTHS}
itemRenderer =MyRenderer/>
< / s:Application>
MyRenderer.mxml:
<?xml version =1.0encoding =utf-8?>
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;
重写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:fill>
< / s:Rect>
< / s:ItemRenderer>
更新2:
我需要和创建行高可变的多行列表博客 - 但对于 spark.components.List ,它没有 wordWrap
属性了。 p>
更新3:
事实上,在RIAStar回答我的问题之后(谢谢!问题刚刚开始 - 当我现在调用 myList.ensureIndexIsVisible(MONTHS.length - 1);
时,它并不真正滚动到底部。
我准备了一个新的问题:列出与m ultilined(文字换行)项目渲染器 - 如何滚动到底部?使用测试用例和截图
您可以使用 VerticalLayout 的 variableRowHeight 属性。就像这样:
< s:List id =myListwidth =60dataProvider ={MONTHS}的itemRenderer = MyRenderer >
< s:layout>
horizontalAlign =justify
requestedMinRowCount =5/>
< / s:layout>
< / s:List>
另外,ItemRenderer中的Label可以占据所需的所有水平空间。你应该限制它的宽度
。例如:
< s:标签宽度=100%/>
In the simple Flex 4 web application below -
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>
UPDATE 2:
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.
UPDATE 3:
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.
I have prepared a new question: List with multilined (word wrapping) item renderer - how to scroll to the bottom? With test case and screenshots
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>
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的Multilined itemRenderer - 带有测试用例和截图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!