码迷,mamicode.com
首页 > 其他好文 > 详细

【Qt编程】基于Qt的词典开发系列<三>--界面美化设计

时间:2015-04-23 17:27:41      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:界面   美化   qt   qss   样式表   

   本文讲一讲界面设计,作品要面向用户,界面设计的好坏直接影响到用户的体验。现在的窗口设计基本都是扁平化的,你可以从window  XP与window 8的窗口可以明显感觉出来。当然除了窗口本身的效果,窗口中各种控件的特效也是特别重要的一环。下面讲讲我在词典软件中的一些设计:说到界面美化的设计,不得不提到美工,一个好的美工是想当的重要!软件毕竟少不了图标,而不懂美工的我,也就只能在网上使用别人的图标了。


如何得到网上的图标?

   直接百度就可以了,当然还有另一种方法:就是从别人的文件中提取这些图标文件。一般来说,图标文件是不会以图片格式存储在软件目录中的,一般都存放在后缀名为.rdb以及.ui文件中。具体的步骤如下:
1、找到要提取软件的安装目录
2、进行搜索:搜索.jpg、.png等图片格式文件(能够搜到最好了),然后搜索.rdb或.ui文件
3、下载RDB打包解包工具,进行解包,就可以得到图片资源了  

控件间的无缝连接:

    所谓无缝连接是指控件与控件之间没有空隙,用Qt Creator打开界面文件,比如我打开这个词典项目,打开searchwindow.ui文件,控件是否有空隙的效果如下所示:
控件间的空隙大小可以由这些子控件所在父控件的Layout属性控制
1、当Layout属性设置如下时:(有空隙的情况)
技术分享
技术分享
则控件间有空隙,显示效果如下:
技术分享
技术分享
2当Layout属性设置如下时:(没有空隙的情况)
技术分享
技术分享
则控件间无空隙,显示效果如下:
技术分享
技术分享

按钮的美化

现在按钮也开始扁平化,例如上图中的所有按钮都是扁平化的,两者的差别如下:
技术分享
技术分享
显然第一种是常规的按钮,如果我们把ToolButton的autoRise属性书中,就会出现第二种情况,之所以没有使用QPushButton是因为它没有autoRaise属性。
技术分享
技术分享
当选中autoRasie属性后,当鼠标放在该按钮上时效果如下:
技术分享

技术分享

动态渲染效果

   我们发现很多软件都有动态效果,如鼠标放在按钮上时,会发生变化,点击后又发生变化,这些是怎么做到的呢?Qt中美化界面最好的使用QML,不过由于刚出来不久,网上资料不是很多,我也不是很懂,就不介绍了。学习过网页制作的都知道,网页的渲染效果用到了css,与此类似,Qt使用qss来美化界面。下面介绍一种简单使用的方法来进行渲染操作:
右键单击界面中的控件,选择“更改样式表……”,然后在弹出的窗口中设置渲染效果,下面以单击按钮来举例说明:
首先,右击关闭按钮,选择“更改样式表……”:
技术分享
技术分享
然后在弹出的“编辑样式表”按钮中写入如下代码:

QToolButton{
	
	border-image: url(:/searchwindow/searchwindow/close_normal.png);
}
//上面的语句是给“关闭”按钮添加close_normal.png的图标,注意这里需要写你自己图片的路径
QToolButton:hover{
	
	border-image: url(:/searchwindow/searchwindow/close_hover.png);
}
//这条语句的作用是,当鼠标放在“关闭”按钮上时,图标变成close_hover.png的图标,注意这里需要写你自己图片的路径
技术分享

这两条语句实现的效果如下:
技术分享
一般情况下,关闭按钮显示如下:
技术分享
技术分享
当鼠标放在上面时,效果如下:
技术分享
技术分享
我在词典中所有的按钮几乎都是采用了这种效果,如果想使用更多的效果,可以百度qt setstylesheet,可以看到更多的渲染效果。在软件界面中,listWidget控件中我使用的样式表如下:
QListWidget::item
{
	width:40px;
	height:40px;
	font:bold 20px;
	

}
 QListWidget {
    
	background-color: rgb(255, 255, 255);
 }

 QListWidget::item:selected:!active {
    background-color: rgb(98, 93, 255);
 }

 QListWidget::item:selected:active {
    
	background-color: rgb(98, 93, 255);
 }

 QListWidget::item:hover {
 
	background-color: rgba(50, 23, 255, 100);
	
 }
具体含义可以根据效果就可以看出,如下演示效果:
技术分享
技术分享
当前选择项使用深蓝表示,而鼠标停靠的选择项使用浅蓝表示。


下面是我软件项目中所有的界面,图标都是使用网络上的图标(若有侵权,请告知):

【Qt编程】基于Qt的词典开发系列<三>--界面美化设计

标签:界面   美化   qt   qss   样式表   

原文地址:http://blog.csdn.net/tengweitw/article/details/45223931

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!