0

我的 DataGrid 中有一个图像。它的目的是播放和停止音频，所以我每次点击时都需要将图像源从“播放”图像更改为“停止”图像。

我已经用下一个代码实现了这一点：

    <?xml version="1.0" encoding="utf-8"?>
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Audio List" 
                horizontalScrollPolicy="off" verticalScrollPolicy="auto"
                showCloseButton="true" close="closeWindow()">
    <mx:Script>
        <![CDATA[
            import flash.external.ExternalInterface;

            import mx.collections.ArrayCollection;
            import mx.managers.PopUpManager;

            public var dpc:ArrayCollection;

            private function closeWindow(){
                PopUpManager.removePopUp(this);
                ExternalInterface.call("pauseAudio");
            }
        ]]>
    </mx:Script>
    <mx:Rotate id="rotate" />
    <mx:Zoom id="zoom" />
    <mx:VBox width="100%" top="20">
        <mx:Text fontWeight="bold" top="20" left="20">
            <mx:text>Click the play/pause button for listening/pause each audio individually:</mx:text>
        </mx:Text>
        <mx:DataGrid id="gridAudios" top="60" bottom="0" left="0" width="100%" height="100%" doubleClickEnabled="true">
            <mx:columns>
                <mx:DataGridColumn headerText="Name" dataField="audioId"/>
                <mx:DataGridColumn id="btnCol" dataField="url" headerText="" textAlign="center">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox>
                                <mx:Image click="changeImg(data.url)" toolTip="Play"
                                      id="imgPlayStop" useHandCursor="true"/>
                                <mx:Script>
                                    <![CDATA[
                                        import mx.states.State;
                                        import mx.collections.ArrayCollection;

                                        [Embed(source='../assets/play-btn-small.png')]
                                        [Bindable]
                                        public var Play:Class;

                                        [Embed(source='../assets/stop-btn-small.png')]
                                        [Bindable]
                                        public var Stop:Class;

                                        private function init():void
                                        {
                                            imgPlayStop.source = Play

                                            var statePlaying:State = new State();
                                            var stateStopped:State = new State();
                                            statePlaying.name="playing";
                                            stateStopped.name="stopped";

                                            var states:Array = new Array();
                                            states.push(statePlaying);
                                            states.push(stateStopped);

                                            imgPlayStop.states = states;

                                            imgPlayStop.currentState = "stopped";
                                        }

                                        private function changeImg(url:String):void{
                                            if (imgPlayStop.currentState == "stopped"){
                                                imgPlayStop.source = Stop;
                                                imgPlayStop.currentState = "playing";
                                                ExternalInterface.call("playAudio", url);

                                            } else {
                                                imgPlayStop.source = Play;
                                                imgPlayStop.currentState = "stopped";
                                                ExternalInterface.call("pauseAudio");                                               
                                            }
                                        }
                                    ]]>
                                </mx:Script>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
    </mx:VBox>
</mx:TitleWindow>

但问题是我想更改 DataGridColumn 其他行的图像源。

例如，如果我单击某一行的播放图像，它会变为停止图像，直到这里一切正常。

如果现在我单击其他行的播放图像，它也会更改为停止图像，但上一行仍然保留有停止图像，并且我希望只有一个采场图像处于活动状态。

换句话说，我想给人的印象是只有一个音频正在播放。因此，只有其中一行可以带有“停止”图像，而其余行必须带有“播放”图像。

那么，我如何在每次单击项目渲染器时循环遍历 DataGridColumn 项目渲染器并更改其图像源？

4

2 回答 2

0

您可以将 prev imgPlayStop 保存为模型类中的公共静态变量并使用它

public class Model {
  public static var prevImgPlayStop:Image;
}

在你的 itemRenderer 中这样做

private function changeImg(url:String):void{
  if (Model.prevImgPlayStop) {
     Model.prevImgPlayStop.currentState = "stopped";
  }
  /*your code*/
  Model.prevImgPlayStop = imgPlayStop;
}
于 2015-01-19T18:58:32.907 回答
0

我发布了我为我的问题建立的解决方案：

    <?xml version="1.0" encoding="utf-8"?>
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Audio List" 
                horizontalScrollPolicy="off" verticalScrollPolicy="auto" width="510" height="340" 
                showCloseButton="true" close="closeWindow()">
    <mx:Script>
        <![CDATA[
            import flash.external.ExternalInterface;
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.managers.PopUpManager;
            import mx.controls.Alert;

            [Embed(source='../assets/play-btn-small.png')]
            var Play:Class;
            [Embed(source='../assets/stop-btn-small.png')]
            var Stop:Class;

            [Blindable]
            public var dpc:ArrayCollection;

            private function titlewindow1_initializeHandler(event) 
            {
                ExternalInterface.addCallback('onFinishAudio', onFinishAudio);
                ExternalInterface.addCallback('onStartAudio', onStartAudio);
            }


            private function closeWindow(){
                PopUpManager.removePopUp(this);
                ExternalInterface.call("pauseAudio");

            }

            private function onFinishAudio(audioId:String) {

                for ( var audio:Object in dpc )
                {
                    if (audio.audioId == audioId){
                        audio.status = 'stopped';
                    }
                }
                gridAudios.dataProvider = dpc;
                dpc.refresh();
            }

            private function onStartAudio(audioId:String)
            {
                for ( var audio:Object in dpc )
                {
                    if (audio.audioId != audioId)
                    {
                        if (audio.status == 'playing')
                        {
                            audio.status='stopped';
                        }
                    } else {
                        //Alert.show("Dgsg","Error");
                        audio.status='playing';
                    }
                }
                gridAudios.dataProvider = dpc;
                dpc.refresh();
            }

            public function playAudio(audioURL:String, audioId:String){
                ExternalInterface.call("playAudio", audioURL, id);
            }

            public function pauseAudio(){
                ExternalInterface.call("pauseAudio");   
            }
        ]]>
    </mx:Script>
    <mx:Rotate id="rotate" />
    <mx:Zoom id="zoom" />
    <mx:VBox top="0" bottom="0" left="0" right="0" paddingTop="20" paddingLeft="20">
        <mx:Text fontWeight="bold" height="20">
            <mx:text>Click the play/pause button for listening/pause each audio individually:</mx:text>
        </mx:Text>
    </mx:VBox>
    <mx:DataGrid id="gridAudios" top="50" bottom="20" left="20" right="20" width="100%" doubleClickEnabled="false">
        <mx:columns>
            <mx:DataGridColumn headerText="Name" dataField="audioId"/>
            <mx:DataGridColumn id="btnCol" headerText="" textAlign="center">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:HBox horizontalAlign="center">
                            <mx:Script>
                                <![CDATA[
                                    protected function image1_clickHandler(event:MouseEvent):void
                                    {
                                        if (data.status=='playing'){
                                            outerDocument.pauseAudio(); 
                                            data.status='';
                                        }else{
                                            outerDocument.playAudio(data.url,data.audioId);
                                            data.status='playing';
                                        }

                                    }
                                ]]>
                            </mx:Script>

                            <mx:Image click="image1_clickHandler(event)" 
                                      toolTip="{data.status=='playing' ? 'Stop' : 'Play'}"
                                      useHandCursor="true" source="{data.status=='playing' ? outerDocument.Stop : outerDocument.Play}"/>
                        </mx:HBox>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</mx:TitleWindow>

解决方案的关键在于Image 对象的 source 属性和click handler。

于 2015-01-29T21:36:49.567 回答