突出顯示列表組件

Question

有時用戶忘記從Spark List組件中進行選擇。其他功能取決於來自此列表組件的選擇。

我希望以編程方式使此列表組件閃爍三次紅色或任何等效的效果，以吸引用戶的注意力。有人知道怎麼做嗎？

Answer 1

你可以做你想要使用Timer和組件的顏色，可見性，阿爾法，什麼...

使用Spark List組件採取這種簡單的工作代碼：

<?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" 
       width="280" height="191" minWidth="955" minHeight="600"> 

    <fx:Script> 
     <![CDATA[ 

      import org.osmf.events.TimeEvent 
      import flash.events.MouseEvent 

      private var timer:Timer 
      private var color:Number 
      private var border_color:Number 
      private const color_1:Number = 0xff0000 
      private const color_2:Number = 0x000000 

      private function btn_colors_clickHandler(event:MouseEvent):void 
      { 

       border_color = my_list.getStyle('borderColor') 
       color = my_list.getStyle('color') 

       my_list.setStyle('borderColor', color_1) 
       my_list.setStyle('color', color_1) 

       timer = new Timer(300, 6) 
       timer.addEventListener(TimerEvent.TIMER, function(e:TimerEvent):void{     
        my_list.setStyle('borderColor', my_list.getStyle('borderColor') == color_2 ? color_1 : color_2) 
        my_list.setStyle('color', my_list.getStyle('color') == color_2 ? color_1 : color_2) 
       }) 
       timer.addEventListener(TimerEvent.TIMER_COMPLETE, function(e:TimerEvent):void{ 
        my_list.setStyle('borderColor', border_color) 
        my_list.setStyle('color', color) 
       }) 
       timer.start()    

      } 

      protected function btn_visibility_clickHandler(event:MouseEvent):void 
      { 

       timer = new Timer(200, 6) 
       timer.addEventListener(TimerEvent.TIMER, function(e:TimerEvent):void{ 
        my_list.visible = ! my_list.visible 
       }) 
       timer.addEventListener(TimerEvent.TIMER_COMPLETE, function(e:TimerEvent):void{ 
        my_list.visible = true 
       }) 
       timer.start() 

      } 

      protected function btn_alpha_clickHandler(event:MouseEvent):void 
      { 

       timer = new Timer(200, 6) 
       timer.addEventListener(TimerEvent.TIMER, function(e:TimerEvent):void{     
        my_list.alpha = my_list.alpha < 1 ? 1 : 0.3 
       }) 
       timer.addEventListener(TimerEvent.TIMER_COMPLETE, function(e:TimerEvent):void{ 
        my_list.alpha = 1 
       }) 
       timer.start() 

      } 

     ]]> 
    </fx:Script> 

    <s:List id="my_list" x="16" y="18" width="148" height="150" borderColor="#666666" borderVisible="true" > 
     <s:dataProvider> 
      <mx:ArrayCollection> 
       <fx:String>line 01</fx:String> 
       <fx:String>line 02</fx:String> 
       <fx:String>line 03</fx:String> 
       <fx:String>line 04</fx:String> 
       <fx:String>line 05</fx:String> 
      </mx:ArrayCollection> 
     </s:dataProvider> 
    </s:List> 
    <s:Button id="btn_colors" x="172" y="20" width="90" height="40" label="colors" 
       click="btn_colors_clickHandler(event)"/> 
    <s:Button id="btn_visibility" x="172" y="70" width="90" height="40" label="visibility" 
       click="btn_visibility_clickHandler(event)"/> 
    <s:Button id="btn_alpha" x="172" y="120" width="90" height="40" label="alpha" 
       click="btn_alpha_clickHandler(event)"/> 

</s:Application> 

之間的差異可見性示例和alpha alpha是使用alpha時的不透明效果。

如果沒有項目被選中，您也可以使用Alert控件來提醒用戶，但是因爲您只講了突出顯示效果，所以我沒有在示例中包含它。你可以這樣使用它：

import mx.controls.Alert 

if(my_list.selectedIndex == -1){ 

    Alert.show('Please select an item from the list.', 'Select an item', mx.controls.Alert.OK) 

} 

希望能幫助你。