Qt之QSS樣式表

2021-09-30 18:59:14 字數 4844 閱讀 7030

一、簡介

1、qt樣式表是一種強大的機制，它允許您自定義小部件的外觀，而不僅僅是通過子類化qstyle已經可以實現的功能。qt樣式表的概念、術語和語法與html的css樣式表類似。

二、樣式表語法

樣式的規則1：樣式規則由選擇器和宣告組成。選擇器指定哪些小部件受規則影響;宣告指定應該在小部件上設定哪些屬性。

如：qpushbutton 。

其中qpushbutton就是選擇器，''是宣告部分。 color就是屬性，red就是指定給該屬性的值。

該語句的意思是qpushbutton及其子類的前景色是紅色。

注意：qt樣式表通常不區分大小寫，除了類名、物件名和qt屬性名。

樣式的規則2：可以為同乙個宣告指定多個選擇器，使用逗號(，)分隔選擇器。

qpushbutton, qlineedit, qcombobox

樣式的規則3：宣告多個屬性。在{}裡面用 ; 分割

qpushbutton

樣式的規則4：選擇器的不同寫法

用法例子

詳解通配選擇器

*通配所有的控制項

類選擇器

qpushbutton

匹配qpushbutton及其子類

屬性選擇器

qpushbutton[flat="false"]

類選擇器

.qpushbutton

匹配qpushbutton的例項，但不匹配其子類的例項。

id選擇器

qpushbutton#okbutton

匹配物件名稱（object name）為okbutton的所有qpushbutton例項。

後代選擇器

qdialog qpushbutton

只匹配qdialog中的所有層級的qpushbutton的樣式（這種層級是指qobject樹所表示的層級）

子選擇器

qdialog > qpushbutton

只匹配qdialog中的第一層級的qpushbutton的樣式（這種層級是指qobject樹所表示的層級）

樣式的規則5：控制項中的子控制項的樣式設定。

對於乙個複雜的控制項，很有必要去控制這個控制項的子控制項。比如qcombobox的下拉按鈕和qspinbox的上下調整大小的箭頭按鈕。選擇器可以包含子控制項，這些子控制項可以將規則的應用程式限制為特定的小部件子控制項。如：

qcombobox::drop-down 。指定了下拉按鈕的填充

樣式的規則6：偽狀態。選擇器可能包含偽狀態，這些偽狀態表示根據小部件的狀態限制規則的應用。偽狀態出現在選擇器的末尾，中間有乙個冒號(:)。如：

qpushbutton:hover 表示當滑鼠懸停時顏色為白色

偽狀態可以使用感嘆號！操作符進行否定。如：

qradiobutton:!hover 表示當滑鼠不是懸停時顏色為紅色

還可以有多個偽狀態一起使用：

qcheckbox:hover:checked 表示 當滑鼠懸停 並且 該核取方塊被選中的時候顏色為白色

qcheckbox:hover, qcheckbox:checked 表示當滑鼠懸停或著被選中的時候 顏色為白色

樣式的規則7：優先順序的確定。如：

qpushbutton#okbutton

qpushbutton

這兩條規則都會應用到名為okbutton的按鈕上，但是他們為同乙個屬性設定了不同的顏色，這會有衝突，那麼要解決這樣的衝突就必須考慮到選擇器的特異性(這個詞怎麼理解，我理解為這個特異性為更加特殊，實際上css上用權重表示這裡的特異性)，顯然qpushbutton#okbutton僅僅針對物件名為okbutton的控制項有效果，而qpushbutton卻對所有的qpushbutton的例項或者是其子類的例項有效果，顯然qpushbutton#okbutton選擇器更加特殊，也就是更具有特異性。所以最終okbutton前景色被應用為灰色。如果兩條規則的特異性一樣，那麼就選擇放在後面的那一條。

以上為語法部分。

以下為qt中的例項應用：

widget::widget(qwidget *parent)


: qwidget(parent)


"); //僅限某個控制項下的objectname為nameedit的控制項設定設定背景色


// this->setstylesheet("qlineedit#nameedit");


//某個控制項的屬性設定為某個值時，應用此樣式表


//指定邊框屬性


// "border-style:outset;border-width:2px;border-color:beige;"


// "border-radius:10px;font: bold 14px;min-width:10em;padding:6px;}"


// "qpushbutton#evilbutton:pressed"


// "qpushbutton::menu-indicator ");


//// this->setstylesheet("qlineedit"


// "qlineedit[readonly=\"true\"]"


// "#registrationdialog qlineedit"


// "qdialog qlineedit");


this->setstylesheet("qtextedit,qlistview");


qvboxlayout *mainlayout = new qvboxlayout;


setlayout(mainlayout);


mainlayout->addwidget(new qlineedit("1111"));


qlineedit *objectnamelineedit = new qlineedit("2222");


objectnamelineedit->setobjectname("nameedit");


//直接在該控制項下指定樣式


objectnamelineedit->setstylesheet("color: blue;"


"background-color: yellow;"


"selection-color: yellow;"


"selection-background-color: blue;");


mainlayout->addwidget(objectnamelineedit);


qformlayout *formlayout = new qformlayout;


qlineedit *password = new qlineedit;


password->setproperty("mandatoryfield",true);


formlayout->addrow("密碼:",password);


mainlayout->addlayout(formlayout);


qpushbutton *evilbutton = new qpushbutton("**按鈕");


evilbutton->setobjectname("evilbutton");


mainlayout->addwidget(evilbutton);


qmenu *menu = new qmenu("選單");


evilbutton->setmenu(menu);


qlineedit *readonly = new qlineedit("唯讀");


readonly->setreadonly(true);


mainlayout->addwidget(readonly);


qlineedit *registrationdialog1 = new qlineedit("registrationdialog1");


registrationdialog1->setobjectname("registrationdialog");


qlineedit *registrationdialog2 = new qlineedit("registrationdialog2");


registrationdialog2->setobjectname("registrationdialog");


mainlayout->addwidget(registrationdialog1);


mainlayout->addwidget(registrationdialog2);


// mydialog *dialog = new mydialog(this);


// dialog->show();


qtextedit *textedit = new qtextedit("這是文字編輯框");


mainlayout->addwidget(textedit);


qlistview *listview = new qlistview;


qstringlist list;


list << "1111" << "2222" << "3333" << "4444";


qstringlistmodel *model = new qstringlistmodel;


model->setstringlist(list);


listview->setmodel(model);


mainlayout->addwidget(listview);


}

QT之qss樣式表設定

qt樣式表的術語和語法規則幾乎和css相同。1 qss樣式規則由乙個選擇器和宣告組成。qpushbutton，qpushbutton為選擇器，為宣告。2 多個選擇器可指定同乙個宣告，用來對這一組部件統一設定。如qpushbutton,qlabel,qtextline qt style sheets ...

qss 介面 樣式表

qpushbutton 設定 icon 後不能再通過樣式表設定 background color 屬性 但是可以設定background image 屬性 不清楚原因。一般情況下button為觸發方式 trigger 只有設定為checkable的時候，轉為切換狀態即toggled 預設狀況下che...

Qt樣式表qss的兩種用法

qt的 qss 樣式表 使我們能夠自定義控制項的顯示效果，令介面看起來不再單調，更具個人風格，而在 vs qt 的開發環境下，實現樣式表主要有兩種方式，下面以 qpushbutton 為例介紹這兩種實現方式 1.通過qt designer修改樣式表 在vs下新建 qt工程，會自動生成乙個 ui檔案，...