如何檢測SpinnerList控件中間的點擊？帶有測試用例和屏幕截圖

Question

如何在SpinnerList控件的中間處檢測項目處的單擊？

I.e.典型的情況 - 當用戶滾動SpinnerList時，直到需要的項目在中間，之後點擊它？

當我剛加入click事件處理程序，然後我還錯誤地檢測的情況下，當用戶只需點擊一些項目得到它顯示在中間的這張截圖所示：

以下是我的測試用例代碼。

有什麼建議嗎？我也嘗試使用自定義SpinnerListItemRenderer並在那裏添加一個點擊處理程序，但它不會改變上述問題。

Main.mxml：

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

的意見/ MainHomeView.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     title="How to detect a click?"> 

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

      private function handleClick(event:Event):void { 
       trace('selectedItem: ' + _list.selectedItem); 
      } 
     ]]> 
    </fx:Script> 

    <s:SpinnerListContainer> 
     <s:SpinnerList id="_list" 
         click="handleClick(event)" 
         typicalItem="45" 
         dataProvider="{new ArrayList([1,5,6,10,15,30])}" 
         wrapElements="false"/> 
    </s:SpinnerListContainer> 
</s:View> 

Answer 1

具有自定義itemRenderer解決它自己 -

RedBlack.as：

package { 
    import flash.events.MouseEvent; 
    import spark.components.List; 
    import spark.components.SpinnerList; 
    import spark.components.SpinnerListItemRenderer; 

    public class RedBlack extends SpinnerListItemRenderer { 
     public function RedBlack() { 
      super(); 
      cacheAsBitmap = true; 
      minHeight = 50; 
      setStyle('textAlign', 'center'); 
      addEventListener(MouseEvent.CLICK, handleClick, false, 0, true); 
     } 

     override public function set data(value:Object):void { 
      super.data = value; 
      setStyle('color', int(value) % 2 ? 'red' : 'black'); 
     } 

     private function handleClick(e:MouseEvent):void { 
      var list:SpinnerList = owner as SpinnerList; 
      var value:int = int(data); 

      if (list && value == list.selectedItem) { 
       trace('clicked in the middle: ' + value); 
      } 
     } 
    } 
}