將spark.components.Application的ControlBar移動到底部

Question

如何將Application的ControlBar移動到Flex 4.5的底部？

的Adobe doc只是說：

默認情況下，ApplicationSkin類定義控制欄區域 出現在應用容器 的灰色背景的內容區域的頂部。創建一個自定義外觀以更改控制欄的默認外觀 。

所以我看spark.skins.spark.ApplicationSkin並有controlBarGroup（它持有ControlBar的內容是什麼？），但我不知道如何將它從頂端移到底部。

Answer 1

首先你需要做的是創建一個自定義皮膚類。在FlashBuilder（FB）中，有一個選項可以自動創建一個，但本質上它只是一個類。

在FB，在項目中的某處單擊鼠標右鍵，選擇 '新建> MXML皮膚'

然後在嚮導表格如下：

否則只需創建一個新的.mxml文件並將spark.skins.spark.ApplicationSkin中的代碼複製/粘貼到其中即可。

然後在您的應用程序分配給你剛剛創建的外觀類：

<s:Application ... skinClass="skins.MyApplicationSkin" /> 

現在，讓我們編輯新建的外觀類。這是你感興趣的部分（我會剪掉一些部分，使其更清晰）：

<s:Group left="0" right="0" top="0" bottom="0"> 
    <s:layout> 
     <s:VerticalLayout gap="0" horizontalAlign="justify" /> 
    </s:layout> 

    <s:Group id="topGroup" minWidth="0" minHeight="0" 
       includeIn="normalWithControlBar, disabledWithControlBar" > 

     <!-- some graphic elements here --> 

     <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" ...> 
      <s:layout> 
       <s:HorizontalLayout ... /> 
      </s:layout> 
     </s:Group> 
    </s:Group> 

    <s:Group id="contentGroup" width="100%" height="100%" ... /> 

</s:Group> 

幾乎在那裏。現在我們需要做的就是在'contentGroup'下面移動'topGroup'。 'topGroup'包含一些圖形+ controlBarGroup。 'contentGroup'是所有組件將被插入的地方，但在你的應用程序.mxml文件中。

<s:Group left="0" right="0" top="0" bottom="0"> 
    <s:layout> 
     <s:VerticalLayout gap="0" horizontalAlign="justify" /> 
    </s:layout> 

    <s:Group id="contentGroup" width="100%" height="100%" ... /> 

    <s:Group id="topGroup" minWidth="0" minHeight="0" 
       includeIn="normalWithControlBar, disabledWithControlBar" > 

     <!-- some graphic elements here --> 

     <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" ...> 
      <s:layout> 
       <s:HorizontalLayout ... /> 
      </s:layout> 
     </s:Group> 
    </s:Group> 

</s:Group> 

Answer 2

您可以嘗試移動內容組下的控制欄組，它應該按照預期行事，特別是如果您查看父組的佈局（垂直）。
如果您想對其執行更多控制，請覆蓋partAdded方法。