搞完了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()
}
}