Qt Quick 5.2 开发笔记3-------qml界面之自定义TitleBar

搞完了c++和QML的交互问题，接下去，终于可以放心开始做界面

先唱一首歌，

美工产品我们去哪里呀
有我在就天不怕地不怕
美工美工我是你的蓝图
一直陪你搞不清楚
产品产品我们去哪里呀
你就是我的天大和地大
程序程序时间的手一挥
你是永远的稀里糊涂

对了，我们这边产品经理兼美工兼测试兼技术支持兼…. 反正是几个小姑娘，她们的想法老在变，但变来变去，一点不会变：就是基本的显示组件。。哥就不等她们了，先动手做起来。

自定义的标题栏AxTitleBar

哥本来的想法是既然要搞跨平台，标题栏就用系统的默认的，这样的话，windows平台下，win7毛玻璃，xp蓝汪汪一堆，mac下关闭最大化最小化跑左边去了，多好，不改变用户习惯，结果老大怀疑我要偷懒，问我既然是小事情，就一句话，按设计做。于是就有了这个。

接下去，我就说说这玩意儿，怎么做：

因为这玩意儿会在几乎所有的窗口用到，于是我给它单独搞了一个qml文件，

AxTitleBar, 先分析，它由，icon，标题文字，缩小放大叉叉三部分组成

同时按照windows的操作习惯，点在中间空白的上面，还能拖动整个窗口，双击相当于点放大。看似简单，实际是低端奢华有内涵的好东西啊。

Icon, 标题文字，不用细说。 一个Image，一个Text，几分钟就搞出来。

后面这个既然是一个组合，就继续捆绑到一起吧。我给了它一个新名字：AxMMCBar

为啥叫这名，哥去年搞DirectUI的时候也遇到这个也取这名字。

你还问为啥。其实就是 Min/Max/Close简写罢了。给小菜鸟一句话，命名是写代码的头等大事，切记切记。

这3个吧，逻辑上应该是同个东西。小姑娘们也没告诉我应该做成啥样。。我差点忘了没有她们的时候，哥除了是程序员之外，连她们现在产品经理兼美工兼测试也给兼了的。于是吧，

1.    都应该有个小图片作为实际显示

2.    定义鼠标Hover上去，显示一个半透明的圆角矩形做背景。

3.    鼠标按下的时候，稍微偏移个把像素啥的。。

于是这个命名为AxMinButton的东西就成了这样。

Item{
    id:container
 
    property alias imageSource:logo.source
    property alias imageWidth:logo.width
    property alias imageHeight:logo.height
 
    signal clicked
 
    property alias containsMouse:mouseArea.containsMouse
    property alias pressed:mouseArea.pressed
 
    Rectangle{
        id:bg
        anchors.fill:parent
        color:"white"
        opacity:0
        radius:2
    }
 
    MouseArea{
        id:mouseArea
        anchors.fill:parent
        onClicked:{
            container.clicked()
        }
 
        onReleased:{
            logo.anchors.horizontalCenterOffset=0
            logo.anchors.verticalCenterOffset=0
        }
 
        onPressed:{
            logo.anchors.horizontalCenterOffset=0.4
            logo.anchors.verticalCenterOffset=0.4
        }
 
        hoverEnabled:true
        onEntered:{
            bg.opacity=0.3
        }
 
        onExited:{
            bg.opacity=0
        }
    }
 
    Image{
        id:logo
        source:"close.png"
        anchors.centerIn:parent
 
        //20140220
        width:20
        height:20
    }
}

然后我们来架构AxMMCBar，

整体结构：它的组成看似3个AxMinButton，其实是4个。

众所周知，当窗口正常显示的时候，分别是 最小化、最大化，叉叉

当窗口最大化的时候，分别是 最小化、正常化、叉叉

也就是 最大化 和 正常化，都在占着同个茅坑拉屎的，无非有你没我有我没你的关系。当然方案2也可以把这哥俩做成一个按钮，只不过这样的话，它们和最小化按钮和叉叉按钮就不是一路人了，需要特殊化处理。

所以我还是选择方案1，理由请参照奥卡姆剃刀原则。

定义信号：分别对应AxMinButton被点击，信号往上扔。另外我把点关闭是否确认，也搞在这里，于是，确认后是否让主窗口退出，也需要一个信号。于是有了如下定义

signal minClicked

signal resizeClicked

signal closeClicked

signal signalClose

属性设置：由于有些窗口是固定大小，不需要最大化按钮，有些弹出窗口，也不需要最小化。于是就有了属性来控制。

propertybool hasMin:true

propertybool hasResize:true

propertybool quitConfirm:true

最后看整个qml文件：

importQtQuick2.0
//importQtQuick.Dialogs1.1
importQtQuick.Window2.1
 
Item{
    id:_main
 
    property bool hasMin:true
    property bool hasResize:true
    property bool quitConfirm:true
    property Window win;
    property real vv;
 
 
    signal minClicked
    signal resizeClicked
    signal closeClicked
 
    signal signalClose
 
    //private
    property bool isNormal:true
    property real buttonSize:24
 
    width:buttonSize*3+2
    height:25
 
    AxMinButton{
        x:hasResize?0:buttonSize
 
        width:20
        height:20
        imageSource:"min.png"
        onClicked:_main.minClicked()
 
        visible:hasMin
    }
 
    AxMinButton{
        x:buttonSize
 
        width:20
        height:20
        imageSource:"tomax.png"
        onClicked:_main.resizeClicked()
 
        visible:hasResize&&isNormal
    }
 
    AxMinButton{
        x:buttonSize
 
        width:20
        height:20
        imageSource:"tonormal.png"
        onClicked:_main.resizeClicked()
 
        visible:hasResize&&!isNormal
    }
 
    AxMinButton{
        x:buttonSize*2
 
        width:20
        height:20
        imageSource:"close.png"
        onClicked:_main.closeClicked()
    }
 
    functiondoSysResize(){
        //console.debug(vv);
        vv=win.visibility;
 
        if(win.visibility==Window.Maximized){
            win.showNormal();
            isNormal=true;
        }
        else{
            win.showMaximized();
            isNormal=false;
        }
    }
 
    onMinClicked:{
        win.showMinimized();
    }
 
    onResizeClicked:{
        doSysResize();
    }
 
    /*
    MessageDialog{
        width:250
        height:96
        id:msgboxSYS
        title:"aXmag"
        text:"Areyousuretoquit?"
        standardButtons:StandardButton.Yes|StandardButton.No
        icon:StandardButton.Question
 
        //onGeometryChanged:{
        //    x--;
        //}
 
        onYes:{
            //console.log("Andofcourseyoucouldonlyagree.")
            //Qt.quit()
            win.close();
        }
    }
    //*/
 
    MsgBox{
        id:msgbox
 
        text:"Areyousuretoquit?"
        onYes:{
            //win.close();
            _main.signalClose()
        }
    }
 
 
    onCloseClicked:{
        //msgbox.visible=true;
        if(quitConfirm)
            msgbox.show()
        else
            //win.close();
            _main.signalClose()
    }
}