QT Framework-偶得之一---讓Forms的UI可以用CSS

 

QSS-Qt Style Sheet.QT 樣式表。如QT官方文檔所介紹,QSS的設計靈感來源於HTML CSS靈感,但它確實應用在QT的Widgets上。按照通俗的說法,就是可以在我們的傳統Client的窗體應用中,加入Web風格的定製元素。

簡單總結下其價值:

1、傳統的客戶端Form應用,其界面定製的“不靈活”一直是廣大Coder們的噩夢,利用QSS定製UI,可以將UI定製部分單獨拆離業務邏輯代碼,其靈活性和易維護性不言而喻;

2、隨着互聯網這幾年的快速發展,特別近幾年所謂Web 2.0時代的帶來,Web上的新技術、新表現手法層出不窮。Web UI定製技術也日新月異。QSS支持W3C 最新的CSS3標準,這樣,我們的Web設計人員可以在無需具有Form開發背景的情況下進行UI定製開發了;

3、QT框架是Nokia開發社區主推的所謂“跨平臺”的“原生”C++框架,和MFC等C++框架一樣,提供了大量的UI定製支持。尤其是QSS 支持。這樣在Windows、MAC、Linux,以至於Sybian、Android和IPhone等平臺上,可以做到UI層次的“平臺無關”和統一;

其他好處很多,在此不慢慢總結。下面,簡單介紹下QSS的使用方法和原理。
爲了直觀說明,上圖:

 


QT框架提供對於QSS的原生“解析引擎”QStyle極其派生類QStyleSheetStyle,可以根據平臺的差異,實現各平臺自己風格的UI支持。

下面看一段界面定製的代碼:

QFrame { --定製對象
    margin: 10px; --定製margin大小
    border: 2px solid green; --定製邊界大小及顏色
    padding: 20px; --定製Padding
    background-color: gray; --定製控件背景色
    background-image: url(qt.png);--。。。。
    background-position: top right;
    background-origin: content;
    background-repeat: none;
}


熟悉CSS的同學一定會覺得很似曾相識,是的!這就是所謂的QSS。其語法與風格與CSS基本一致,同樣支持Selector等標準CSS風格語法。
那麼,如何載入樣式呢,繼續上代碼:
有兩種載入QSS的方法:
1)應用級:QApplication::setStyleSheet ( const QString & sheet )。顧名思義,就是在應用初始化時,載入QSS來初始化各Widget的全局樣式。

2)控件級: QWidget::setStyleSheet ( const QString & sheet )。是在控件初始化時,載入本控件關聯的Widget。


和CSS一樣,QSS也是符合級聯規則的(子控件繼承父控件樣式)。
喜歡或者對於QSS感興趣的同學,可以去找些QT官方的DOC慢慢研究,目前QT框架還屬於完善階段,但其應用大有前途!


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