PopUpButton与TileList和自定义渲染器

Question

我准备了一个PopUpButton的简单测试用例，它打开一个带有黑色和红色条目的TileList，它主要工作，但有2个烦恼。

我已经搜索了很多，尝试了几种变体（加入[绑定]成员在我的渲染器;加入色部件向出价阵列;创建了公共覆盖集数据（）方法; ...），并且具有也得到了一些答案，但它们太泛泛。

我将不胜感激，如果有人能提出代码来解决在我的代码的2个问题：

1）滚动“TL2”左右不顺利：该条目显示在红色的搭配和黑色。我知道TileList重用了itemRenderer，但我该如何解决这个问题？

2）在调试模式下，我得到多次警告： 警告：无法绑定到属性“标签”阶级“对象”（类不是一个IEventDispatcher，请）

谢谢 亚历

MyRenderer.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
      verticalScrollPolicy="off" horizontalScrollPolicy="off" 
      width="100%" height="100%"> 
    <mx:Script> 
     <![CDATA[ 
      public static function findColor(str:String):uint { 
       return (str.indexOf('♥') != -1 || 
        str.indexOf('♦') != -1) ? 0xFF0000 : 0x000000; 
      } 
     ]]> 
    </mx:Script> 

    <mx:Label truncateToFit="true" width="60" 
       text="{data.label}" color="{findColor(data.label)}"/> 
</mx:Canvas> 

MyTest.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
       creationPolicy="all" applicationComplete="init(event);"> 
    <mx:Style> 
     @font-face { 
      src:url("C:\\WINDOWS\\Fonts\\arial.ttf"); 
      fontFamily: myFont; 
      unicodeRange: 
       U+0020-U+0040, /* Punctuation, Numbers */ 
       U+0041-U+005A, /* Upper-Case A-Z */ 
       U+005B-U+0060, /* Punctuation and Symbols */ 
       U+0061-U+007A, /* Lower-Case a-z */ 
       U+007B-U+007E, /* Punctuation and Symbols */ 
       U+0410-U+0451, /* cyrillic */ 
       U+2660-U+266B; /* card suits */ 
     } 
     List, CheckBox, Label, Button, PopUpButton, TileList { 
      fontFamily: myFont; 
      fontSize: 24; 
     } 
    </mx:Style> 

    <mx:Script> 
     <![CDATA[ 
      import mx.controls.*; 
      import mx.events.*; 

      [Bindable] 
      private var bids:Array; 
      private var tl:TileList; 

      private function init(event:FlexEvent):void { 
       bids = createBids(); 
       pub.popUp = createList(bids); 
      } 

      private function createBids():Array { 
       var arr:Array = [{label: 'Pass'}]; 
       for (var i:uint = 6; i <= 10; i++) 
        for (var j:uint = 0; j < 5; j++) 
         arr.unshift({label: i+'♠♣♦♥ '.charAt(j%5)}); 

       return arr; 
      } 

      private function createList(arr:Array):TileList { 
       tl = new TileList(); 
       tl.maxColumns = 5; 
       tl.width = 350; 
       tl.height = 250; 
       tl.dataProvider = arr; 
       tl.itemRenderer = new ClassFactory(MyRenderer); 
       tl.addEventListener('itemClick', itemClickHandler); 

       if (arr.length > 0) { 
        tl.selectedIndex = arr.length - 1; 
        pub.label = arr[tl.selectedIndex].label; 
       } 

       return tl; 
      } 

      private function itemClickHandler(event:ListEvent):void { 
       var index:uint = tl.columnCount * event.rowIndex + event.columnIndex; 
       var label:String = bids[index].label; 
       pub.label = label; 
       pub.setStyle('color', MyRenderer.findColor(label)); 
       pub.close(); 
       tl.selectedIndex = index; 
      } 
     ]]> 
    </mx:Script> 

    <mx:Panel title="TileList scrolling problem" height="100%" width="100%" 
       paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> 

     <mx:Label width="100%" color="blue" text="Select your bid:"/> 

     <mx:TileList id="tl2" height="200" width="200" 
        maxColumns="5" rowHeight="30" columnWidth="60" 
        dataProvider="{bids}" itemRenderer="MyRenderer"/> 
    </mx:Panel> 

    <mx:ApplicationControlBar width="100%"> 
     <mx:Spacer width="100%"/> 
     <mx:CheckBox id="auto" label="Auto:"/> 
     <mx:Button id="left" label="&lt;&lt;"/> 
     <mx:PopUpButton id="pub" width="90"/> 
     <mx:Button id="right" label="&gt;&gt;"/> 
    </mx:ApplicationControlBar> 
</mx:Application> 

更新：

谢谢韦德，警告现在已经不复存在了（我想这是不正常使用我的标签{} data.label），但“TL2”仍然滚动的问题。

新MyRenderer.mxml（仍然滚动的问题）：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
      verticalScrollPolicy="off" horizontalScrollPolicy="off" 
      width="100%" height="100%"> 
    <mx:Script> 
     <![CDATA[ 

      override public function set data(value:Object):void { 
       super.data = value; 

       var str:String = String(value.label); 
       myLabel.text = str; 
       myLabel.setStyle('color', findColor(str)); 
      } 

      public static function findColor(str:String):uint { 
       return (str.indexOf('♥') != -1 || 
        str.indexOf('♦') != -1) ? 0xFF0000 : 0x000000; 
      } 
     ]]> 
    </mx:Script> 

    <mx:Label id="myLabel" truncateToFit="true" width="60"/> 
</mx:Canvas> 

Answer 1

您可以通过重写组数据的方法在您的项目渲染照顾您的两个问题：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
      verticalScrollPolicy="off" horizontalScrollPolicy="off" 
      width="100%" height="100%"> 
    <mx:Script> 
     <![CDATA[ 
      override public function set data(value:Object):void { 
       super.data = value; 
       var str:String = value.label; 
       this.myLabel.text = str; 
       this.myLabel.setStyle("color", (str.indexOf('♥') != -1 || 
        str.indexOf('♦') != -1) ? 0xFF0000 : 0x000000); 
      } 
     ]]> 
    </mx:Script> 

    <mx:Label id="myLabel" truncateToFit="true" width="60"/> 
</mx:Canvas> 

由于渲染器被重新使用，确保它们被正确更新的最好方法是使用set数据方法，因为渲染器被重用时它总是被调用。由于您不再绑定data.label，因此也会摆脱绑定警告。注意：我没有测试过这段代码，它可能需要一些调整:)希望有帮助。

编辑︰你的“tl2”问题看起来像它是由水平滚动你的瓷砖列表引起的，而TileList似乎是针对垂直滚动进行了优化。由于您的数据集是有限且相对较小的，因此我会使瓦片列表显示全部大小以显示所有元素（消除项目渲染器的重用）并将其包装在设置为所需尺寸的画布中，并让画布处理滚动。可能不是你要找的答案，对不起。