转载  使用Qt Style Sheets制作UI特效

分类: 2015-02-10T14:47:18    823人阅读   

引言

作为一套GUI框架,Qt是非常强大的。(注:Qt 不仅是一套优秀的GUI框架,同时也是一套出色的应用程序框架)。
在UI的制作方面Qt为广大开发者提供了一套强大而易用的工具,她就是——Qt Style Sheets。
本文将向大家举例介绍如何使用Qt Style Sheets制作个性化的UI界面。例子程序(stylesheetDemo)可通过本文末尾所附链接下载。

UI涉及的东西非常庞杂,Qt Style Sheets也包含许许多多的内容,因此本文并不试图对Qt Style Sheets进行系统的理论性的详解,那需要数十倍于本文的篇幅。本文仅通过几个例子,将大家引入Qt Style Sheets的大门,以后如有更多需求大家直接在Qt Assistant中查询Qt Style Sheets并且结合自己写的程序进行测试就可以了。

测试设备

Nokia N8

预备知识

Style sheets 是由一系列的style rules组成的。一条style rule 由选择器selector和声明declaration这两部分构成。selector说明这条规则在哪些widgets上起作用,declaration说明要在这些widgets上设置什么属性properties。例如:
  1. QPushButton, QLineEdit  { color: red; background-color: white }  
在上面这条style rule中QPushButton, QLineEdit 是两个选择器,中间用逗号连接。 { color: red; background-color: white }是声明declaration,大括号里面是一系列的 property: value对,中间用分号连接。这条规则指出对QPushButton和QLineEdit 以及他们的子类需要使用红色作为其前景色,并使用白色作为其背景色。

Qt widgets所支持的所有属性列表请查阅List of Properties


Tab1:QLineEdit QGroupBox QRadioButton QCheckBox QLabel(使用qss文件)

例子程序的UI结构非常简单,只有两部分,上方是一个有三个tab页面的QTabWidget,下面是一个QPushButton。
下面我们先来制作TabWidget的第一个页面Tab1。先看一下效果图:
图一:
Tab1 1.jpg


图二:
Tab1 2.jpg


这张是没有使用StyleSheet的样子:
1.jpg


Tab1中使用到了五种控件。如果控件较多或比较复杂,我们可以通过使用qss文件来设置Style Sheet。首先我们新建一个文本文档,后缀名改为qss,然后用文本编辑器比如记事本打开它,将我们设置的Style Sheets写进去然后保存就可以了。本例程创建的qss文件叫stylesheetDemo.qss,于是我们在程序中只需要写如下几行代码就可以使我们写在qss文件中的Style Sheets起作用:

  1. QFile file(":/qss/stylesheetDemo.qss");  
  2. file.open(QFile::ReadOnly);  
  3. QTextStream filetext(&file);  
  4. QString stylesheet = filetext.readAll();  
  5. ui->tab->setStyleSheet(stylesheet);  

程序中stylesheetDemo.qss已加入到资源文件,其中ui->tab就是TabWidget中的第一个tab页面。


下面是stylesheetDemo.qss的内容:

  1. QGroupBox {  
  2.     background-image: url(:/pics/background.png);   
  3.     border-radius: 30px;  
  4. }  
  5.    
  6. QLabel {  
  7.     color: gray;  
  8. }  
  9.    
  10. QLineEdit {  
  11.     background: qradialgradient(cx:0, cy:0, radius: 1,  
  12.             fx:0.5, fy:0.5, stop:0 white, stop:1 rgba(0,190,0, 60%));  
  13.     border-radius: 9px;  
  14. }  
  15.    
  16.    
  17.    
  18. QCheckBox:checked {  
  19.     color: green;       
  20. }  
  21.    
  22. QCheckBox::indicator {  
  23.       width: 25px;  
  24.       height: 25px;  
  25. }  
  26.    
  27. QCheckBox::indicator:checked {  
  28.         image: url(:/pics/checkbox.gif);  
  29. }  
  30.    
  31.    
  32.    
  33. QRadioButton{  
  34.       spacing: 10  
  35. }  
  36.    
  37. QRadioButton::indicator {  
  38.       width: 25px;  
  39.       height: 25px;  
  40. }  
  41.    
  42. QRadioButton:checked {  
  43.       color: rgb(230,115, 0);       
  44. }  
  45.    
  46. QRadioButton::indicator:checked {  
  47.       image: url(:/pics/radioButton.png);  
  48. }  

其中border-radius指的是边框四角的半径,这一属性可以制作出弧形的边框。
background-image属性设置控件的背景图片。
background-color 设置控件的背景色,我们这里对QLineEdit使用了渐变的颜色,这里利用了Qt提供的qradialgradient
一个冒号说明的是状态,例如“:checked”指的是当此控件被checked的时候。
双冒号说明的是子控件,例如“::indicator”指的是 QCheckBox、QRadioButton、QAbstractItemView 或者是可以被选中的 QMenu item或QGroupBox的indicator。

这里需要注意的是,由于QRadioButton和QCheckBox在Symbian上的实现有一点缺憾,就是他们在获得焦点的时候,其新的背景颜色会完全覆盖掉控件,用户就看不到控件了。因此我们需要去掉他们获得焦点的能力:

  1. ui->checkBox->setFocusPolicy(Qt::NoFocus);  
  2. ui->checkBox_2->setFocusPolicy(Qt::NoFocus);  
  3. ui->radioButton->setFocusPolicy(Qt::NoFocus);  
  4. ui->radioButton_2->setFocusPolicy(Qt::NoFocus);  

Tab2:QTextBrowser (在代码中setStyleSheet)

程序中对TextBrowser设置了一种透明的背景颜色,并且是像彩虹一样逐渐变化的颜色。这主要是利用了qlineargradient。下面分别是竖屏和横屏状态下Tab2的效果图:

图三:
Tab2 1.jpg


图四:
Tab2 2.jpg


这张是没有使用StyleSheet的样子:
2.jpg

我们这里直接在代码中对textBrowser设置StyleSheet:

  1. ui->textBrowser->setStyleSheet("  
  2.             color: rgb(127, 0, 63);  
  3.             background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1,   
  4.                                 stop: 0 rgba(255, 0, 0, 30%), stop: 0.2 rgba(255, 128, 0, 30%), stop: 0.4 rgba(255, 255, 0, 30%),   
  5.                                 stop: 0.6 rgba(0, 255, 0, 30%), stop: 0.8 rgba(0, 128, 255, 30%), stop: 1 rgba(128, 0, 255, 30%));   
  6.             selection-color: white;  
  7.             selection-background-color: rgb(191, 31, 127);  
  8.             border: 2px groove gray;  
  9.             border-radius: 30px;  
  10.             padding: 2px 4px;");  

Tab3:QWebView

QWebView也是可以通过Qt Style Sheets的方式在一定程度上修改网页呈现在用户面前的样子。
例程中对WebView设置了完全透明的背景色,下面是效果图:
图五:
Tab3 1.jpg


图六:
Tab3 2.jpg


图七:
Tab3 3.jpg


这张是没有使用StyleSheet的样子:
3.jpg

  1. ui->webView->setStyleSheet("border: 1px groove gray; border-radius: 5px; background-color: rgba(255, 193, 245, 0%); ");  

这里要注意,这样设置只对本身透明的网页是有效的,如果网页自己设置了白色背景,则我们还是看不到透明的效果。
还要额外说明一点,如果不对webView的border属性进行设置,而使用QWebView在N8上的默认实现,则网页中的Button是黑色的背景,Button上的字是看不清的。
要想完全使网页按照我们自定义的样式进行显示(渲染),最根本的解决办法是我们修改Webkit,从而渲染出我们需要的样子。

QPushButton QTabWidget

对比图一和图二,我们会发现exit按钮按下和没有按下时的背景、文字颜色和文字位置都是不一样的,其中背景是通过border-image实现的,文字的位置是通过padding来控制的。

  1. ui->ExitpushButton->setStyleSheet("  
  2.                                       QPushButton {  
  3.                                             color: white;  
  4.                                             border-image: url(:/pics/button.png);  
  5.                                             border-width: 12px;  
  6.                                             padding: -12px 0px;  
  7.                                             min-height: 25px;  
  8.                                             min-width: 60px;  
  9.                                             }  
  10.                                       QPushButton:pressed {  
  11.                                             color: lightgray;  
  12.                                             border-image: url(:/pics/button-pressed.png);   
  13.                                             padding-top: -10px;  
  14.                                             padding-bottom: -16px;  
  15.                                             }  
  16.                                       ");  

对于三个tab标签的样式是这样设置的,其中!selected表示没有选中,margin-top: 5px;会使得选中的tab比没选中的高5个像素。
  1. ui->tabWidget->setStyleSheet("  
  2.                                  QTabBar::tab {  
  3.                                         color: rgb(84,2,119);  
  4.                                         background-image: url(:/pics/wood.jpg);   
  5.                                         border: 2px solid rgb(68,66,64);  
  6.                                         border-bottom-color: rgb(68,66,64);   
  7.                                         border-top-left-radius: 20px;  
  8.                                         border-top-right-radius: 20px;  
  9.                                         max-height: 21px;  
  10.                                         min-width: 8ex;  
  11.                                         padding: 2px;  
  12.                                         }   
  13.                                   QTabWidget::tab-bar {  
  14.                                         alignment: center;  
  15.                                         }   
  16.                                   QTabBar::tab:!selected {  
  17.                                         margin-top: 5px;   
  18.                                         }  
  19.                                   QTabBar::tab:selected {  
  20.                                         color: rgb(255,0,128);   
  21.                                         }  
  22.                                   ");  

最后横竖屏背景图片的切换也是通过stylesheet实现的:
  1. void MainWindow::resizeEvent ( QResizeEvent * event )  
  2. {  
  3.     enum ScreenMode currentscreenMode;  
  4.     if(size().height()> size().width())  
  5.         currentscreenMode = Portrait;  
  6.     else  
  7.         currentscreenMode = Landscape;  
  8.    
  9.     if (currentscreenMode!=scmode)  
  10.     {  
  11.         scmode = currentscreenMode;  
  12.         switch(scmode)  
  13.         {  
  14.         case Portrait:  
  15.             this->setStyleSheet("QMainWindow{ background-image: url(:/pics/bgPortrait.jpg)}");  
  16.             break;  
  17.         case Landscape:  
  18.             this->setStyleSheet("QMainWindow{ background-image: url(:/pics/bgLandscape.jpg)}");  
  19.             break;  
  20.         default:  
  21.             break;  
  22.         }  
  23.     }  
  24. }  
分享到: