Qt的Qss樣式

qt值qss(stylesheet)用法簡介（一） :使用qt寫程序，總要有界面，而美工給程序猿的設計老是那麼美輪美奐，那麼該怎麼樣將效果圖轉化爲實際圖http://blog.csdn.net/cgzhello1/article/details/8514113學習

QT Pushbutton 美化字體

------------------------------------------------ui

摘要：this

QT Create中，對button或者window等部件設置背景、顏色、透明等樣式時，須要用到style sheet，能夠直接在代碼裏寫，也能夠在ui設計師裏經過右鍵change style sheet的方法來設置，本人是使用的後面的方式，下面介紹幾種常見的用法。url

介紹：

做者使用的開發環境爲：qt creator 201005, qt4.7。

一、利用style sheet給窗體設置背景

使用stylesheet設置背景圖片仍是有一些要注意的，若是是在mainwindow和dialog中，直接右鍵change style sheet在add resource中選擇background-image或者border-image，選擇資源文件中的圖片就好了（前者是按像素顯示圖片，後者可根據窗體大小來自動縮放圖片），以下圖：

但在widget中就不行，你會發現，用一樣的方法，背景並無發生改變，而僅僅是它的子窗體背景圖片發生了改變。

那麼在widget中要如何作呢，咱們在widget中放置一個frame，而後對frame經過stylesheet設置背景，後面窗體裏全部的部件都放在這個frame裏。

咱們知道，子窗體會繼承父窗體的屬性，也就是說，父窗體的背景，在子窗體中也會有，那如何讓子窗體不繼承父窗體的背景呢，一樣的，仍是在Edit Style Sheet裏，需下輸入以下代碼：

#desktop {
border-image: url(:/images/desktop.jpg);
}
#desktop * {
border-image:url();
}

desktop是你的窗體名。

二、menubar設置透明

我想作一個菜單按鈕，像ubuntu的應用程序菜單同樣，能在點擊時彈出一個下拉框，我選擇了用mainwindow來實現，但我如現menuba顯示在頂層很難看，如何才能不讓它顯示呢。

設置menuba的stylesheet，

background-color:transparent

將背景設置爲透明。

三、tool button不顯示邊框

當咱們設置button的icon時，發現icon的形狀並不與button徹底一致，以下圖：

設置stylesheet

border-style: flat;

效果以下：

注意，必定要選擇tool button，而不要選擇push button，由於push button活動的時候會有一個虛線框。

要達到上圖的效果，除了設置border-style:flat，可不能夠將style設置爲transparent呢？設置成transparent後，顯示上看，效果是和上圖的同樣，但當按下時，button沒有被圖片覆蓋的地方就會顯示被按下時的顏色。

四、在父窗體的stylesheet中設置子部件的屬性

假設有多個button，且它們的樣式是同樣的，那是否是須要一個個設置呢？不須要的，咱們能夠在父窗體中進行設置，那麼子部件都會繼承它的屬性。

若是某個button的樣式特殊，再單獨修改就好了，下面舉個實例，在父窗體的stylesheet中設置以下

QDialog{background:rgb(229, 255, 239)}

QMenuBar{background:url(:/image/header.bmp)}

QStatusBar{background:url(:/image/header.bmp)}

QPushButton{background:url(:/image/header.bmp)}

QLCDNumber{background:url(:/image/lcd.bmp)}

QLabel{color: rgb(0, 0, 255)}

QDial{background-color: rgb(67, 67, 67)}

QGroupBox {

border-width:2px;

border-style:solid;

border-color:#FFFFFF;

}

QGroupBox{color: rgb(255,255, 255)}

QToolButton{border-style: flat;}

結語：

style sheet用起來很方便，以上是總結的幾種用法，後面會繼續補充。

--------------------

關於控件styleSheet的設置方法：

一、Designer方法：直接在屬性的styleSheet添加以下行：

color:red;background-image:url("D:/back.jpg"); //設置字體爲紅色;設置背景圖像

;表示共存；

二、代碼方法：setStyleSheet(...)等

三、這樣加載styleSheet的話可能引發整個窗體字號等的變化；並且加載圖像很慢，嚴重影響程序執行速度。

另外可參考widget 特殊樣式設置方法

http://blog.csdn.net/dbzhang800/article/details/6875352

在mainwindow.cpp裏做以下修改：

#include "mainwindow.h"

#include "ui_mainwindow.h"

#include <QFile>//加入這兩個頭文件

#include <QTextStream>

void loadStyleSheet(QString qssName)//加入下面函數

{

QFile data(qssName);

QString qssFile;

if(data.open(QFile::ReadOnly))

{

QTextStream styleIn(&data);

qssFile = styleIn.readAll();

data.close();

qApp->setStyleSheet(qssFile);

}

MainWindow::MainWindow(QWidget *parent) :

QMainWindow(parent),

ui(new Ui::MainWindow)

{

loadStyleSheet(QString(":/style1.qss"));//在構造函數裏添加這一句，加載stylesheet

ui->setupUi(this);

}

=============================================

QT stylesheet 操做

QT style sheet的基本原理就是利用QSS語言對軟件的外觀進行定製。QSS能夠直接在代碼中輸入，也能夠保存在一個文本文件中，利用文件讀取函數在軟件運行時

讀入到一個文本串中，再利用QApplication類的函數setStyleSheet(&QString)使其生效。實例代碼：

#include <QTextStream>
#include <QFile>
QFile file("./styles/default.qss");
file.open(QFile::ReadOnly);
QString styleSheet = file.readAll();//QLatin1String(file.readAll());
a.setStyleSheet(styleSheet);

//-----------------------------------------------------------------------------------------------使用的例子：

#ifndef DIALOG_H#define DIALOG_H
#include <QDialog>
#include <QGridLayout>
#include <QLabel>
#include <QPushButton>
#include <QLineEdit>

namespace Ui {class Dialog;}

class Dialog : public QDialog{    Q_OBJECT    public:    explicit Dialog(QWidget *parent = 0);   
 ~Dialog();    
private:    Ui::Dialog *ui;    QGridLayout *layout1;    
QPushButton *btn1;   
 QPushButton *btn2;  
  QPushButton *btn3;    
QPushButton *btn4;    
QLineEdit   *edit1;};
#endif // 

DIALOG_H
#include "dialog.h"
#include "ui_dialog.h"
Dialog::Dialog(QWidget *parent) :    QDialog(parent),    ui(new Ui::Dialog)
{    ui->setupUi(this);        this->setWindowFlags(this->windowFlags()&Qt::WindowMaximizeButtonHint&Qt::WindowMinimizeButtonHint);
 //爲對話框添加上最大化和最小化按鈕    
   layout=new QBoxLayout(this);    
    layout1=new QGridLayout(this);  
      btn1=new QPushButton(this);      
  btn1->setStyleSheet("QPushButton{color:red;background:yellow}"); //設定前景顏色，就是字體顏色    //
    btn1->setStyleSheet("QPushButton{background:yellow}");        btn1->setText("Button1");     
   btn2=new QPushButton(this);   
     btn2->setStyleSheet("QPushButton{color:red;background-color:rgb(200,155,100)}"); //使用rgb來設定背景顏色       
 btn2->setText("Button2");      
   btn3=new QPushButton(this);  
      
 btn3->setStyleSheet("QPushButton{background-image:url
(image/1.png);background-repeat: repeat-xy;background-position: 
center;background-attachment: fixed;background-attachment: 
fixed;background-attachment: fixed;;background-clip: 
padding}");         //設定按鈕的背景圖片,background-repeat能夠設定背景圖片的
重複規則，這裏設定僅在xy方向都重複，因此圖片會被重複一
次       
  //background-position用來設定圖片的位置，是左(left)仍是右(right)，仍是在中間(center),是上(top)仍是底部(bottom)      
   //background-attachment用來這定背景圖片是否捲動或者和窗口大小相匹配，默認是捲動的         btn3->setText("Button3");     
    btn4=new QPushButton(this);       
  btn4->setStyleSheet("QPushButton{border: 3px solid red;border-radius:8px}"); //設定邊框寬度以及顏色      
   //可使用border-top，border-right，border-bottom，border-left分別設定按鈕的上下左右邊框，     
    //一樣有border-left-color, border-left-style, border-left-width.等分別來設定他們的顏色，樣式和寬度    
     //border-image用來設定邊框的背景圖片。       
  //border-radius用來設定邊框的弧度。能夠設定圓角的按鈕         btn4->setText("Button4");      
   //字體設定         //font-family來設定字體所屬家族，      
   //font-size來設定字體大小         //font-style來設定字體樣式         //font-weight來設定字體深淺         //height用來設定其高低         //selection-color用來設定選中時候的顏色         edit1=new QLineEdit(this);       
  edit1->setStyleSheet("QLineEdit{font: bold italic large "Times New Roman";
font-size:25px;color:rgb(55,100,255);
height:50px;border:4px solid rgb(155,200,33);border-radius:15px;selection-color:pink}");       
  //父窗口的設定         //icon-size來設定圖片大小       
  this->setWindowIcon(QIcon("image/1.png"));       
   this->setStyleSheet("QWidget{background:write url(image/2.png);icon-size:20px 5px}"); 
 //設定整個對話框的背景顏色  
  //      this->setStyleSheet("QWidget{icon-size:20px 5px}");       
 layout1->addWidget(btn1,0,0);        layout1->addWidget(btn2,0,1);        l
ayout1->addWidget(btn3,1,0);        layout1->addWidget(btn4,1,1);      
  layout1->addWidget(edit1,2,0);  setLayout(layout1);}Dialog::~Dialog(){    delete ui;}

 ------------------------------

QPushBUtton美化

第一篇

http://blog.csdn.net/yiyaaixuexi/article/details/6706729

第二篇

http://blog.csdn.net/yiyaaixuexi/article/details/6343337

有不少朋友都抱怨，爲何本身使Qt作的小項目，UI那麼土那麼俗，方方框框，基本控件很醜，要不是Qt的跨平臺，纔不去學習它。呵呵，其實我想說，嵌入式系統中的圖形界面，統統交給QT，絕對沒問題！

簡單說說自定義Button，QPushButton是經常使用組件之一，先看下效果。

當單擊按鈕後，效果如圖：

實現代碼：

 1 Button::Button(QWidget *parent) : QPushButton(parent)  
 2 {  
 3     //保存圖片成員初始化  
 4     buttonPicture = new QPixmap();  
 5     pressPicture = new QPixmap();  
 6     releasePicture = new QPixmap();  
 7   
 8     //關閉按鈕的默認顯示  
 9     this -> setFlat(true);  
10 }  
11   
12 void Button::setButtonPicture(QPixmap pic)  
13 {  
14     *buttonPicture = pic;  
15       
16     this -> setIcon(QIcon(*buttonPicture));  
17 }  
18   
19 void Button::setPressPicture(QPixmap pic)  
20 {  
21     *pressPicture = pic;  
22 }  
23   
24 void Button::setReleasePicture(QPixmap pic)  
25 {  
26     *releasePicture = pic;  
27 }  
28   
29 void Button::set_X_Y_width_height(int x, int y, int width, int height)  
30 {  
31     this -> setIconSize(QSize(width, height));  
32     this -> setGeometry(x, y, width, height);  
33 }  
34   
35 void Button::mouseDoubleClickEvent(QMouseEvent *event)  
36 {  
37     //null  
38 }  
39   
40 void Button::mousePressEvent (QMouseEvent *event)  
41 {  
42     this -> setIcon (QIcon(*pressPicture));  
43 }  
44   
45 void Button::mouseMoveEvent(QMouseEvent *event)  
46 {  
47     //null  
48 }  
49   
50   
51 void Button::mouseReleaseEvent (QMouseEvent *event)  
52 {  
53     this -> setIcon(QIcon(*releasePicture));  
54     emit clicked();  
55 }

這下明白嘍？咱們只是須要在mousePressEvent和mouseReleaseEvent中，添加setIcon(QIcon(*buttonPicture))的處理，就讓Button動起來了o(∩_∩)o ...

順便說下icon的資源處理，你不要告訴我你不會

哦，即便不會，咱但是能夠寫PS的無所不能的程序員，學一下怎麼使用應該不難吧？

將圖片摳出所選區域，設置爲透明 png格式，這樣不會覆蓋背景。建議你們把文字也作進圖片裏，而不是在QT裏文本，由於不一樣分辨率不一樣大小的嵌入式設備屏幕，顯示效果很差控制。製做靜態（同釋放後）與點擊狀態兩種按鈕圖標。

就是這樣！簡單吧？

這裏預留了mouseDoubleClickEvent(QMouseEvent *event)，mouseMoveEvent(QMouseEvent *event)的響應，熱愛Qt的朋友不如本身動動手，美化本身的button~