1. 先隱藏原生的標題欄: 編輯xxx-app.xml, 找到systemChrome行, 取消注釋, 并設置值為none:
<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<systemChrome>none</systemChrome>
2. 構造標題欄: 先用漸變色填充背景, 然后分別添加關閉, 最小化, 最大化按鈕以及標題. 幸運的是Flex的WindowedApplication提供了exit, minimize, maximize和restore方法, 關閉, 最小化, 最大化以及還原窗口算是非常簡單了:
<s:Group width="100%" height="20">
<s:Rect id="background" left="0" top="0" right="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:entries>
<s:GradientEntry color="0xCCCCCC" ratio="0" alpha="1"/>
<s:GradientEntry color="0x999999" ratio=".66" alpha="1"/>
</s:entries>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Image source="close.png" click="exit()" width="20" y="2"/>
<s:Image source="min.png" click="minimize()" width="20" x="20" y="2"/>
<s:Image source="max.png" click="handleMax()" width="20" x="40" y="2"/>
<s:Label id="_titlebar" text="TestAir" left="60" top="0" right="0" bottom="0" textAlign="center" verticalAlign="middle"/>
</s:Group>
3. 給標題添加事件, 以達到拖拽標題時, 移動窗口. 這里走了不少彎路(開始用監聽鼠標移動事件, 計算鼠標的移動距離, 以修改nativeWindow的x和y坐標, 發現鼠標移動過程中, 窗口一直在抖動), 最后發現WindowedApplication的nativeWindow有startMove方法, 只要在mouse down事件里面調用此方法, 就可以達到移動窗口的目的:
this.addEventListener(Event.ADDED_TO_STAGE, function(e:*):void {
_titlebar.addEventListener(MouseEvent.MOUSE_DOWN, function (e:MouseEvent):void {
nativeWindow.startMove();
});
});
本文完整代碼見附件:AirTitleBar