Qt樣式表使用總結2,基本語法

2021-09-28 06:19:15 字數 2128 閱讀 9060

本文只是簡單介紹下最常用的qss寫法,方便新手快速上手,不會完整涵蓋所有語法知識點。

希望新手以20%的時間了解到80%使用率的技能,細枝末節的內容在實踐中慢慢接觸即可。

qss語法大致沿襲css,最簡單的寫法:

選擇器
qpushbutton
會對所有按鈕都應用樣式:背景色淺藍色、文字顏色白色、邊框1畫素實線公尺灰色。

背景色:background:#1c86ee;

文本色:color:white;

邊框:border:1px solid #8b7e66;

邊框圓角:border-radius: 4px;

單獨設定四個邊框:

border-left:1px solid red; 

border-right:1px solid red; 

border-top:1px solid green; 

border-bottom:1px solid green;

內邊距:

padding:10px 5px 15px 20px;

padding-left: 5px;

padding-right: 5px;

padding-top: 5px;

padding-bottom: 5px;

外邊距:

margin:10px 5px 15px 20px;

margin-left: 5px;

margin-right: 5px;

margin-top: 5px;

margin-bottom: 5px;

寬高:width: 100px;

height: 20px;

某種狀態下的:image: url(:/image/ok.png);

字型:font-family:"microsoft yahei";

font-size:12px;

font-weight:bold;

如讓樣式只對btnok和btncancel 兩個名稱的按鈕應用生效。

qpushbutton#btnok,#btncancel
以上大部分情況下夠用了,不過有時候通過屬性過濾可能更方便:

qpushbutton[***="abc"]
該按鈕需設定屬性***="abc":

ui->pushbutton->setproperty("***","abc");
不同的控制項可能有各種狀態,一般對應不同的樣式:

偽類說明

:disabled

widget 被禁用時

:enabled

widget 可使用時

:focus

widget 得到輸入焦點

:hover

滑鼠放到 widget 上

:pressed

滑鼠按下時

:checked

被選中時

:unchecked

未選中時

:has-children

item 有子 item,例如 qtreeview 的 item 有子 item 時

:has-siblings

item 有 兄弟,例如 qtreeview 的 item 有兄弟 item 時

:open

開啟或展開狀態,例如 qtreeview 的 item 展開,qpushbutton 的選單彈出時

:closed

關閉或者非展開狀態

:onwidget 狀態是可切換的(toggle), 在 on 狀態

:off

widget 狀態是可切換的(toggle), 在 off 狀態

如qpushbutton就有正常、滑鼠滑過(hover)、滑鼠按下(pressed)等狀態。

qcheckbox有checked、unchecked等。

qlineedit的禁用狀態disabled和可用狀態enabled 也需要明顯的樣式區分。

qpushbutton

qpushbutton:hover

qpushbutton:pressed

qt 樣式表基本用法

qt樣式表參考css層疊樣式表設計,不同之處在於qt樣式表應用於widget世界。this setstylesheet qpushbuttonqslider qpushbutton qpushbuttonqpushbutton是選擇符,是宣告,color是屬性,red是值 選擇符選擇符 示例說明 通...

Qt樣式表使用總結1,常用樣式表設定方法

qt中給窗體或控制項新增樣式表的方法,大體有以下幾種 1,在ui設計器即qt designer內新增,右鍵控制項 改變樣式表 或直接在屬性內輸入 3,專案中,一般將樣式表內容寫到文字檔案,程式啟動時再通過方法2載入 這樣方便管理,調整樣式也不用重新編譯,還避免在 中書寫過長字串。該方法的好處是可以在...

QT樣式表語法

樣式規則 每個樣式規則由選擇器和宣告組成。選擇器 指定收該規則影響的部件。宣告 指定這個部件上要設定的屬性。如 qpushbutton qpushbutton 是選擇器 是宣告 color 是顏色屬性 red 是顏色屬性對應的值 選擇器 此規則指定了 qpushbutton 和它的子類使用紅色作為前...