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:containerproperty alias imageSource:logo.sourceproperty alias imageWidth:logo.widthproperty alias imageHeight:logo.heightsignal clickedproperty alias containsMouse:mouseArea.containsMouseproperty alias pressed:mouseArea.pressedRectangle{id:bganchors.fill:parentcolor:"white"opacity:0radius:2}MouseArea{id:mouseAreaanchors.fill:parentonClicked:{container.clicked()}onReleased:{logo.anchors.horizontalCenterOffset=0logo.anchors.verticalCenterOffset=0}onPressed:{logo.anchors.horizontalCenterOffset=0.4logo.anchors.verticalCenterOffset=0.4}hoverEnabled:trueonEntered:{bg.opacity=0.3}onExited:{bg.opacity=0}}Image{id:logosource:"close.png"anchors.centerIn:parent//20140220width:20height: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.1Item{id:_mainproperty bool hasMin:trueproperty bool hasResize:trueproperty bool quitConfirm:trueproperty Window win;property real vv;signal minClickedsignal resizeClickedsignal closeClickedsignal signalClose//privateproperty bool isNormal:trueproperty real buttonSize:24width:buttonSize*3+2height:25AxMinButton{x:hasResize?0:buttonSizewidth:20height:20imageSource:"min.png"onClicked:_main.minClicked()visible:hasMin}AxMinButton{x:buttonSizewidth:20height:20imageSource:"tomax.png"onClicked:_main.resizeClicked()visible:hasResize&&isNormal}AxMinButton{x:buttonSizewidth:20height:20imageSource:"tonormal.png"onClicked:_main.resizeClicked()visible:hasResize&&!isNormal}AxMinButton{x:buttonSize*2width:20height:20imageSource:"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:250height:96id:msgboxSYStitle:"aXmag"text:"Areyousuretoquit?"standardButtons:StandardButton.Yes|StandardButton.Noicon:StandardButton.Question//onGeometryChanged:{//    x--;//}onYes:{//console.log("Andofcourseyoucouldonlyagree.")//Qt.quit()win.close();}}//*/MsgBox{id:msgboxtext:"Areyousuretoquit?"onYes:{//win.close();_main.signalClose()}}onCloseClicked:{//msgbox.visible=true;if(quitConfirm)msgbox.show()else//win.close();_main.signalClose()}
}

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

Qt+腾讯IM开发笔记（一）：腾讯IM介绍、使用和Qt集成腾讯IM-SDK的工程模板Demo
若该文为原创文章,转载请注明原文出处本文章博客地址:https://hpzwl.blog.csdn.net/article/details/119305601 长期持续带来更多项目与技术分享,咨询请 ...
Android开发笔记（九十五）自定义Drawable
Drawable Bitmap是Android对图像的定义描述,而Drawable则是对图像的展现描述,在View视图中显示图像都是通过Drawable来实现的.其中有关Bitmap的介绍参见< ...
云炬Android开发笔记 11主界面-商品分类开发（多布局Section RecyclerView）
阅读目录 1. 分类页面结构解析和开发 1.1 布局的创建 1.2 布局的逻辑组合 2. 分类左侧列表数据解析与UI呈现 2.1 数据的转换 2.2[完善list列表逻辑] 3.多布局Section列 ...
1.2 Qt Creater使用Python开发桌面软件的界面设计
上节中介绍了项目创建流程,本节主要介绍软件界面的设计. 首先我们打开Qt Creater的设计界面,我们可以看到屏幕中间就是需要设计的软件窗体:左侧列表中为控件(软件设计所需要的各种按钮,文本,列表等 ...
云炬Android开发笔记 10主界面-首页UI与数据解析器开发（RecyclerView）
阅读目录 1.创建首页UI 1.1 检查依赖是否存在 1.2 布局 1.3 控件查找 2.首页下拉刷新实现 2.1[初始化] 2.2 封装刷新功能 2.3 加载数据的处理 3. 首页数据结构分析 3. ...
云炬Android开发笔记 9主界面-通用底部导航设计与一键式封装
阅读目录 1.底部导航BottomBar设计与实现 1.1 说明 1.2 基于每个tab的子frament的父类的实现 1.3 建立bean类包含tab的信息(icon+文字) 2.打造适合电商主界 ...
Qt Quick QMl学习笔记之图片浏览器
Qt Quick模块是编写QML应用程序的标准库.虽然Qt QML模块提供QML引擎和语言基础结构,但Qt Quick模块提供了使用QML创建用户界面所需的所有基本类型.它提供了一个可视画布,包括用于 ...
二选一的时候到了，Qt Widgets 还是 Qt Quick ? 致Qt开发伙伴
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.Qt QWidgets 和 Qt Quick 各自有什么特性.特点? 1.Qt QWidgets 2.Qt Qui ...
Qt Quick编程——QML的核心部分ECMAScript
说道QML,不得不先说一下ECMAScript: ECMAScript语言的标准是由Netscape.Sun.微软.Borland等公司基于JavaScript和JScript锤炼.定义出来的. EC ...

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

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

最新文章

热门文章