QT Creator的style sheet的幾種用法(QT Creator)(StyleSheet)(樣式)(QT4.7)(用法)

轉載地址: http://blog.csdn.net/senkkes/article/details/53321343

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

介紹:

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

    1、利用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是你的窗體名。

    2、menubar設置透明

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

    設置menuba的stylesheet,

background-color:transparent

    將背景設置爲透明。

    3、tool button不顯示邊框

    當我們設置button的icon時,發現icon的形狀並不與button完全一致,如下圖:

    

   設置stylesheet

border-style: flat;

    效果如下:

    注意,一定要選擇tool button,而不要選擇push button,因爲push button活動的時候會有一個虛線框。

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

 4、在父窗體的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用起來很方便,以上是總結的幾種用法,後面會繼續補充。

參考資料:  

Qt中設置widget背景顏色/圖片的注意事項(使用樣式表 setStyleSheet())

發佈了82 篇原創文章 · 獲贊 138 · 訪問量 79萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章