Qt的Qss用法小結(jié)

更新時(shí)間：2023年06月06日 10:00:04 作者：IT觀察者

Qt的Qss是一種用于定義用戶界面的樣式表語(yǔ)言，本文主要介紹了Qt的Qss用法小結(jié)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

選擇器

選擇器用來指定要樣式化的控件，選擇器可以使用控件的名稱、類型、ID、類、父子關(guān)系等來進(jìn)行定位。常見的選擇器有：

類型選擇器： QPushButton
類選擇器： .mybutton
ID 選擇器： #mybutton
屬性選擇器： QWidget[enabled="false"]
父子選擇器： QListWidget > QListWidgetItem

樣式屬性

在 Qt 的 Qss 中，樣式屬性可以分為兩類：控件屬性和子控件屬性，其中控件屬性用于設(shè)置控件自身的樣式，子控件屬性用于設(shè)置控件的子控件的樣式。

常用的控件屬性和樣式如下：

樣式屬性	描述
background	控件背景色
border	控件邊框
color	控件文本顏色
font-size	控件字體大小
font-family	控件字體
padding	內(nèi)邊距
margin	外邊距
text-align	控件文本對(duì)齊方式
text-indent	控件文本縮進(jìn)
opacity	控件透明度

常用的子控件屬性和樣式如下：

樣式屬性	描述
QScrollBar:vertical	豎向滾動(dòng)條
QScrollBar:horizontal	橫向滾動(dòng)條
QScrollBar::handle	滾動(dòng)條滑塊
QScrollBar::add-page	滾動(dòng)條向后翻頁(yè)按鈕
QScrollBar::sub-page	滾動(dòng)條向前翻頁(yè)按鈕
QScrollBar::add-line	滾動(dòng)條向后滾動(dòng)按鈕（小箭頭）
QScrollBar::sub-line	滾動(dòng)條向前滾動(dòng)按鈕（小箭頭）
QComboBox QAbstractItemView	下拉框的列表視圖
QComboBox QAbstractItemView::item	下拉框的列表項(xiàng)

示例

下面是一個(gè)簡(jiǎn)單的 Qss 樣式示例：

QPushButton {
? background: #00bfff;
? color: #fff;
? border: 2px solid #fff;
? font-size: 24px;
? padding: 4px 8px;
? margin: 4px;
}
QLineEdit {
? background: #fff;
? color: #000;
? border: 2px solid #00bfff;
? padding: 4px 8px;
? margin: 4px;
}
QComboBox QAbstractItemView {
? background: #fff;
? color: #000;
? border: 2px solid #00bfff;
? padding: 4px 8px;
? margin: 4px;
}
QComboBox QAbstractItemView::item {
? background: #00bfff;
? color: #fff;
? font-size: 18px;
? padding: 4px 8px;
? margin: 4px;
}
QScrollBar:vertical {
? background: #fff;
? width: 16px;
? margin: 4px;
}
QScrollBar::handle:vertical {
? background: #00bfff;
? border-radius: 8px;
? margin: 2px;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
? background: none;
}
QScrollBar:horizontal {
? background: #fff;
? height: 16px;
? margin: 4px;
}
QScrollBar::handle:horizontal {
? background: #00bfff;
? border-radius: 8px;
? margin: 2px;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
? background: none;
}

上面的樣式將會(huì)應(yīng)用到 QPushButton、QLineEdit、QComboBox、QScrollBar 等控件上，并且可以看到各個(gè)控件的樣式都是不一樣的。其中，QComboBox 還設(shè)置了下拉列表視圖及列表項(xiàng)的樣式。

除了上述基本語(yǔ)法外，Qt 的 Qss 還有一些高級(jí)特性。

偽狀態(tài)和偽元素

Qss 支持控件的偽狀態(tài)和偽元素，用來描述控件處于特定狀態(tài)時(shí)的樣式。常見的狀態(tài)包括：hover（鼠標(biāo)懸停時(shí)）、pressed（鼠標(biāo)按下時(shí)）、checked（選中狀態(tài)）、disabled（不可用狀態(tài)）等。

樣式示例：

QPushButton:hover {
? background: #1e90ff;
}
QPushButton:checked {
? color: #ff4500;
}

尺寸和單位

Qss 支持不同的尺寸和單位來定義樣式，包括像素（px）、絕對(duì)長(zhǎng)度（cm、mm、in、pt、pc）、相對(duì)長(zhǎng)度（em、ex、rem）、百分比（%）等，用于實(shí)現(xiàn)不同尺寸的控件效果。

QPushButton {
? width: 100px;
? height: 30px;
}
QLabel {
? font-size: 1.5em;
}
QTextEdit {
? padding: 0.5rem;
}
QComboBox {
? width: 50%;
}

顏色和圖像

Qss 支持使用顏色和圖像來定義控件的背景，邊框和文本顏色等樣式。

顏色示例：

QWidget {
? background-color: red;
}
QPushButton {
? color: white;
? background-color: rgb(0, 255, 0);
}
QLineEdit {
? border: 1px solid #ccc;
}
QLabel {
? color: black;
? background-color: rgba(255, 255, 0, 0.5);
}

圖像示例：

QPushButton {
? border-image: url(button.png) 5 5 5 5 stretch;
}
QLabel {
? background-image: url(background.png);
? background-repeat: no-repeat;
? background-position: center;
? background-size: cover;
}
QTextEdit {
? background-image: url(paper.jpg);
? background-attachment: fixed;
}

動(dòng)畫效果

Qss 還支持使用動(dòng)畫效果來實(shí)現(xiàn)控件的動(dòng)態(tài)樣式，通過 @keyframes 和 animation 實(shí)現(xiàn)。

樣式示例：

QPushButton:hover {
? animation: pulse 0.5s;
}
@keyframes pulse {
? 0% {background-color: #1e90ff;}
? 50% {background-color: #00bfff;}
? 100% {background-color: #1e90ff;}
}