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