日志
Qt之实现360安全卫士主界面(一)
2012-03-14 12:12
摘自Qt开发者驿站
该博文只是模仿[font=&]360安全卫士的主界面,并不牵涉其中的任何业务功能;重在个人见解以及界面实现;关于[font=&]360安全卫士的主界面,我想大家都见到过,毕竟基本大部分人都安装过这个软件,基于我对其界面的个人见解,对主界面分割为四部分:分别为标题栏、工具栏、内容区域、状态栏,分割图例如下图所示: 由于标题栏、工具栏、内容区域和状态栏都不是标准的部件,因此只能子类化部件进行自定义开发;主窗口继承于QFrame,而标题栏、工具栏、内容区域与状态栏都继承于QWidget;最后在主窗口中使用QVBoxLayout布局将其他部件加入到该布局中即可,其中标题栏和工具栏以及状态栏都是固定高度的,宽度和内容区域是随窗口缩放而缩放的。使用[font=&]Qt实现主界面的效果如下图所示(按【[font=&]Alt+F4】键退出主界面): 大家可以对比一下,如果在该界面中再添加一些内容,就会越来越像了,后续博文会继续添加内容。 下面讲解具体实现方法,当然方法不只一种,也欢迎各位博友提出自己的看法与实现方式。 1、 自定义主窗口标题栏属于操作系统,我们不能控制标题栏;因此要去掉窗口默认的标题栏,我们使用[[font=&]Qt::FramelessWindowHint窗口样式即可,这样就没有了默认的标题栏,这时需增加我们自定义的标题栏部件即可,再依次增加其他部件到布局中;这些都是很基本的,不多阐述,代码如下:
2、主窗口背景以及圆角实现 主窗口背景使用图片平铺实现,当然使用Qt的样式表是最为简单方便的了;Qt的样式表格式和css基本一致;如果对css熟悉的话,对Qt的样式表(qss)就会很快熟悉起来; setStyleSheet("QFrame {background-image:url(:/image/frame.jpg);border:1px solid black;}"); 360安全卫士的主界面是圆角的,我们的主界面当然也要实现圆角的了;在主窗口的重绘事件中添加如下代码即可:
3、主窗口大小 主窗口缩放到一定值之后便不能缩小,所以应该设置其最小宽度和高度;
[font=&]OK,主界面基本看起来有点像样了,当然这个主界面还不能移动,不能缩放,没有工具栏等,这些功能在后续的博文中会阐述添加。摘自Qt开发者驿站 |
下一篇: Qt之实现360安全卫士主界面(二)
上一篇: Qt动画效果展示
-
删除
zhongfugutao:请问如果想进一步做的话,内容区域随着工具栏按钮的改变而改变的话,楼主有什么思路给提示一下?谢谢!
2012-10-09 10:48 -
-
删除
wuweihua0115:(有图)如何修改标题栏的样式??(最大最小按钮等的样式)
2012-07-16 09:55 -
-
删除
klan131:你公开源代码必然会被抄,有很多人指望这个呢~
2012-05-22 09:40 -
楼主文章写的很好~对于指挥信手拈来的人来说别指望了,除非楼主发慈悲赏赐你源代码,我不是小白,看了半个多月qt了,表示可以慢慢消化
-
删除
niubiairenka:我当初需要做一个自定义标题栏,看到你这篇日志如获至宝,仔仔细细认认真真的从头看完,结果。。。还是不知道怎么下手,你说蛋疼不
2012-05-15 14:39 -
-
删除
niubiairenka:我们在下载别人的代码里面很多代码可能都没接触过,需要通过调试慢慢理解每一步的作用,看代码有时也是一个困难的过程,更何况没有代码就看你这些日志,难道就能模仿出你的效果来了吗?
2012-05-15 14:37 -
-
删除
niubiairenka:不公开源代码,这个东西发出来无任何意义,这样搞真不如在源代码上写注释
2012-05-15 14:34 -
dxfans:参数传递,信号槽通知来实现动态切换
2012-10-09 12:50