如何在Flex HGroup中選擇一個對象？

Question

我有一個按鈕來創建一個圖像對象，每次單擊它並將該圖像對象添加到Hgroup中。 Hgroup可能包含一些圖像對象。另一個旋轉對象的按鈕。

我想做什麼：

1. 爲了能夠選擇一個對象。
2. 因此每次單擊旋轉按鈕時，所選對象可圍繞一個點旋轉90度。
3. 也想限制在容器/ Hgroup中添加的項目數量（必須帶有邊框）
4. 哪個是我可以用於上述目的的最佳容器（列表，邊框容器，Hgroup）？

目前我什麼代碼可以做： 1.添加圖像對象HGroup每個按鈕上單擊 2.我只能旋轉在HGroup中的第一項。

我對flex很陌生。我不知道如何去做這件事。請有人幫助我一個例子。你可以運行我的代碼來了解我正在嘗試做什麼。

請幫助我.. 謝謝:)

這是整個代碼我現在有（U可以在你的電腦如果u希望運行它）：

<fx:Declarations> 
    <s:Rotate id="rotAnim" angleBy="90" duration="1000" target="{myImage}" 
       autoCenterTransform="true" /> 
</fx:Declarations> 
<fx:Script> 
    <![CDATA[ 
     import spark.components.Image; 

     private function generateImage():Image{ 
      var image:Image = new Image(); 
      [Embed(source='assets/test_Image.png')]    
      var myImg1:Class; 
      image.source = myImg1; 
      image.scaleX = 0.5; 
      image.scaleY = 0.5;    
      return image; 
     } 
     private function addImageToContainer(event:MouseEvent):void{ 
      var image1:Image = new Image();    
      image1 = generateImage();    
      holdingArea.addElement(image1);   
     } 

     [Bindable] 
     private var myImage:Image;   
     private function rotateImage():void { 
      myImage = holdingArea.getElementAt(0) as Image; 
      if (rotAnim.isPlaying) return; 
      rotAnim.play(); 
     } 

    ]]> 
</fx:Script> 
<s:BorderContainer x="216" y="53" width="319" height="367"> 

    <s:BorderContainer x="10" y="10" width="297" height="298" > 
     <s:HGroup id="holdingArea" x="4" y="5" width="287" height="285"> 
     </s:HGroup> 
    </s:BorderContainer> 

    <s:Button x="23" y="324" label="Add Image Object" click="addImageToContainer(event)"/> 
    <s:Button x="149" y="324" label="Rotate" click="rotateImage()"/>  

</s:BorderContainer> 

Answer 1

這裏有一個如何的例子你可以用List組件來實現這一點。
首先創建一個將成爲圖像狀態的演示模型的模型對象。

public class MyImage { 

    [Bindable] 
    public var source:Class; 

    [Bindable] 
    public var rotation:Number = 0; 

} 

現在使用自定義的ItemRenderer創建一個List。請注意，我使用List而不是DataGroup（正如我在評論中所建議的那樣），因爲您需要知道選擇了哪個項目。

<s:List id="imageList" dataProvider="{dp}" 
     x="216" y="53" width="319" height="367"> 

    <s:itemRenderer> 
     <fx:Component> 
      <s:ItemRenderer width="20" height="20"> 
       <s:Image source="{data.source}" rotation="{data.rotation}" 
         horizontalCenter="0" verticalCenter="0" 
         scaleX=".5" scaleY=".5"/> 
      </s:ItemRenderer> 
     </fx:Component> 
    </s:itemRenderer> 

    <s:layout> 
     <s:HorizontalLayout/> 
    </s:layout> 
</s:List> 

<s:Button x="23" y="324" label="Add Image Object" click="addImage()"/> 
<s:Button x="149" y="324" label="Rotate" click="rotateImage()"/> 

中的itemRenderer的data屬性將被填充的MyImage情況下，正如你可以看到我們綁定到其source和rotation性能。
請注意，爲了簡潔起見，我在此使用了ItemRenderer的內聯定義，但我建議您將它在現實世界中移動到單獨的類中。爲了清晰起見，我也忽略了效果。
Horizo​​ntalLayout將告訴列表水平顯示其項目，而不是默認的垂直佈局。

現在創建數據提供程序的列表（它已經綁定在上面的代碼中看到{dp}）：

[Bindable] 
public var dp:IList = new ArrayCollection(); 

，並添加一些項目則單擊按鈕時：

[Embed(source='assets/CalendarIcon.png')] var myImg1:Class; 

private function addImage():void { 
    var image:MyImage = new MyImage(); 
    image.source = myImg1; 
    dp.addItem(image); 
} 

List將自動創建一個新的ItemRenderer以反映dataProvider中的這個新項目。

現在可以通過點擊第二個按鈕將其旋轉：

private function rotateImage():void { 
    if (imageList.selectedItem) imageList.selectedItem.rotation += 90; 
} 

您更新所選MyImage實例的rotation。綁定將完成其餘的工作，並旋轉ItemRenderer中的實際Image。