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
 
    propertyaliasimageSource:logo.source
    propertyaliasimageWidth:logo.width
    propertyaliasimageHeight:logo.height
 
    signalclicked
 
    propertyaliascontainsMouse:mouseArea.containsMouse
    propertyaliaspressed: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被点击,信号往上扔。另外我把点关闭是否确认,也搞在这里,于是,确认后是否让主窗口退出,也需要一个信号。于是有了如下定义
signalminClicked
signalresizeClicked
signalcloseClicked
signalsignalClose
属性设置:由于有些窗口是固定大小,不需要最大化按钮,有些弹出窗口,也不需要最小化。于是就有了属性来控制。
    propertyboolhasMin:true
    propertyboolhasResize:true
propertyboolquitConfirm:true
最后看整个qml文件:
 
importQtQuick2.0
//importQtQuick.Dialogs1.1
importQtQuick.Window2.1
 
Item{
    id:_main
 
    propertyboolhasMin:true
    propertyboolhasResize:true
    propertyboolquitConfirm:true
    propertyWindowwin;
    propertyrealvv;
 
 
    signalminClicked
    signalresizeClicked
    signalcloseClicked
 
    signalsignalClose
 
    //private
    propertyboolisNormal:true
    propertyrealbuttonSize: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()
    }
}

你可能感兴趣的:(架构,设计,产品,界面,qml,qt5)