Qt淺談之二十二Qt樣式表
阿新 • • 發佈：2019-02-16
一、簡介
不斷總結好的樣式表，美化自己的介面（在實際工作中會不斷的更新）。
二、詳解
1、載入樣式表文件
QFile file(":/qss/stylesheet.qss");
file.open(QFile::ReadOnly);
QString styleSheet = QLatin1String(file.readAll());
qApp->setStyleSheet(styleSheet);
file.close();動態新增樣式表，樣式表加入到資原始檔中。
2、QListWidget樣式
{ QListWidget *contentsWidget = new QListWidget(this); contentsWidget->setStyleSheet("QListWidget{background:rgba(210,240,250,255);color:#19649F;border:0px solid gray;padding:0px -2px 5px 5px;}" "QListWidget::item{width:94px;height:35px;border:0px solid gray;padding-left:8px;}" "QListWidget::item:!selected{}" "QListWidget::item:selected:active{background:#FFFFFF;color:#19649F;border-width:-1;}" "QListWidget::item:selected{background:#FFFFFF;color:#19649F;}" ); contentsWidget->setFocusPolicy(Qt::NoFocus); contentsWidget->resize(156, 180); contentsWidget->addItem(tr("abc")); contentsWidget->addItem(tr("123")); contentsWidget->addItem(tr("456")); contentsWidget->move(4, 33); }
{ QListWidget *contentsWidget = new QListWidget(this); contentsWidget->setStyleSheet("QListWidget{background-color:rgba(210,240,250,255);color:#19649F;border:0px solid gray;padding:0px -2px 5px 5px;}" "QListWidget::item{width:94px;height:35px;border:0px solid gray;background-color:transparent;padding:-1px;color:#000000}" "QListView::item:!enabled{background-image:url(:/handleMenu_clusters_error.png);background:#ceaf01;color:#FF0000}" "QListWidget::item:hover{background-image:url(:/handleMenu_lixt_bg_hover);color:#FFFFFF;border-width:0;}" "QListWidget::item:selected{background-image:url(:/handleMenu_lixt_bg_selected.png);}" ); contentsWidget->setMouseTracking(true); contentsWidget->setAutoFillBackground(true); //contentsWidget->setFocusPolicy(Qt::NoFocus); contentsWidget->resize(156, 180); QListWidgetItem *newItem = new QListWidgetItem(QIcon(":/handleMenu_clusters.png"), "abc"); contentsWidget->addItem(newItem); contentsWidget->addItem(tr("123")); contentsWidget->addItem(tr("456")); contentsWidget->addItem(tr("789")); contentsWidget->setCurrentRow(1); contentsWidget->move(4, 33); contentsWidget->show(); contentsWidget->item(0)->setFlags(Qt::NoItemFlags); }
第一行是disable狀態，第三行是選中狀態，還有是hover狀態。但disable時，圖片被自動處理，不能顯示為其他顏色圖片，還需研究。也可以加上單選框：
contentsWidget->item(0)->setFlags(Qt::ItemIsEnabled|Qt::ItemIsUserCheckable);
contentsWidget->item(0)->setCheckState(Qt::Unchecked);
3、QComboBox
{ QComboBox *combox = new QComboBox(this); //combox->setStyle(new QWindowsStyle); combox->setGeometry(100, 100, 96, 26); combox->addItem(tr("abc")); combox->setStyleSheet("QComboBox{border:1px solid #d7d7d7; border-radius: 3px; padding: 1px 18px 1px 3px;} " "QComboBox:editable{ background: white; }" "QComboBox:!editable{ background: #fbfbfb; color:#666666}" "QComboBox::drop-down{ subcontrol-origin: padding; subcontrol-position: top right; width: 22px; border-left-width: 1px; border-left-color: #c9c9c9; border-left-style: solid; /* just a single line */ border-top-right-radius: 3px; /* same radius as the QComboBox */ border-bottom-right-radius: 3px; }" "QComboBox::down-arrow { image: url(:/down.png); }" "QComboBox::down-arrow:on { /* shift the arrow when popup is open */ top: 1px; left: 1px;}" "QComboBox QAbstractItemView::item{max-width: 30px;min-height: 20px}"); QListView *listView = new QListView; listView->setStyleSheet("QListView{font-size: 11px}" "QListView::item:!selected{color: #19649f}" "QListView::item:selected:active{background-color: #1275c3}" "QListView::item:selected{color: white}"); combox->setView(listView); }
在linux加上combox->setStyle(new QWindowsStyle);可以保證下拉列表的位置在正下方。其他的樣式：combox->setStyle(new QMotifStyle);或combox->setStyle(new QPlastiqueStyle);
Qcombox在每個選項上增加QToolTips，已解決有些項過長的問題：
listView->setCursor(Qt::PointingHandCursor);
connect(listView, SIGNAL(entered(QModelIndex)), this, SLOT(slotEntered(QModelIndex)));
void Widget::slotEntered(const QModelIndex &index)
{
QToolTip::showText(QCursor::pos() + QPoint(10, 0), index.data().toString());
} QString name = "abc123456789";
int maxLen = 20;
QString textTemp = name;
QFontMetrics metrics(this->font());
int i;
int textLen = metrics.width(name);
if (textLen > maxLen) {
for(i = 0 ; i < name.length(); i++) {
if(metrics.width(name.mid(0, i) + "...") >= maxLen) break;
}
textTemp = name.mid(0, i);
textTemp += "...";
}4、QProgressBar
{
QProgressBar *process = new QProgressBar(this);
process->setValue(30);
//process->setAlignment(Qt::AlignCenter);
//process->setStyleSheet("QProgressBar{border: 1px solid grey;border-radius: 5px;}"
// "QProgressBar::chunk{background-color: #05B8CC;width: 20px;}");
process->setStyleSheet("QProgressBar{border: 1px solid grey;border-radius: 5px;text-align: center;}"
"QProgressBar::chunk{background-color: #CD96CD;width: 10px;margin: 0.5px;}");
process->setGeometry(100, 100, 150, 23);
}
5、QLineEdit
"QLineEdit:enabled{color:#19649F}"
"QLineEdit:disabled{color:#666666}"{
QLineEdit *lineEdit = new QLineEdit(this);
lineEdit->setStyleSheet("border: 1px solid gray;border-radius:5px; background:rgba(255,255,255,0); padding: 0px 10px 0px 20px;"
"background:yellow;selection-background-color: darkgray;");
lineEdit->setGeometry(100, 100, 120, 28);
}
setStyleSheet("QLineEdit{border:1px solid #C3C3C3;background:rgba(255,255,255,0);color:#19649F;margin-left:8px;margin-right:10px;}"
"QLineEdit:hover{border: 1px solid #10B9D3}"
"QLineEdit:enabled{color:#19649F}"
"QLineEdit:disabled{color:#666666}");5、QSlider
{
QSlider *slier = new QSlider(Qt::Horizontal,this);
slier->setGeometry(10, 350, 300 , 10);
slier->setStyleSheet("QSlider::groove:horizontal{border:0px;height:4px;}"
"QSlider::sub-page:horizontal{background:white;}"
"QSlider::add-page:horizontal{background:lightgray;}"
"QSlider::handle:horizontal{background:white;width:10px;border-radius:5px;margin:-3px 0px -3px 0px;}"
);
}
7、其他
QPushButton：
下面我們將通過一個按鈕的部件來設定屬性樣式：
首先來設定一下樣式：
QPushButton#evilButton { background-color: red }
說明設定的當前的按鈕為紅色。 作為一個flat 平滑的按鈕時沒有邊界的。 下面是來改進一下對邊界的設定。
QPushButton#evilButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-color: beige;
}
在這裡設定了一個邊界的型別與邊界的寬度。 這樣看上去就好多了，文件中無法展現圖片， 有興趣可以去Qt的變成環境當中去嘗試。即使這樣設計， 按鈕看上去也是顯得混亂，與主部件沒有辦法分開。 首先是在邊界設定出一個空間出來， 並且強制的制定最小寬度，與環繞的弧度， 並且提供一個按鈕的字型設定， 似的按鈕看上去比較好看。
QPushButton#evilButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}
如此這樣當我們點選按鈕的時候按鈕也不會發生什麼樣的深刻變化。 所以就需要指定一個合適的背景顏色與不一樣的邊界型別。
QPushButton#evilButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}
QPushButton#evilButton:pressed {
background-color: rgb(224, 0, 0);
border-style: inset;
}
指定QPushButton 選單指示器的子控制
子控提供了訪問子子元素的功能， 例如通常的時候一個按鈕將會管理一個選單，
QPushButton#evilButton::menu-indicator {
image: url(myindicator.png);
}
同時如果美化一個按鈕的話， 那麼將可以通過定位符來確定美化按鈕的路徑， 通常可以是一個圖片。
QPushButton::menu-indicator {
image: url(myindicator.png);
subcontrol-position: right center;
subcontrol-origin: padding;
left: -2px;
}
經過以上的設定那麼QPushButton 將會在方格的中心顯示一個myindicator.png 的圖片。
定製按鈕
QPushButton {
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
min-width: 80px;
}
QPushButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
QPushButton:flat {
border: none;
}
QPushButton:default {
border-color: navy;
}
QPushButton:open {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
QPushButton::menu-indicator {
image: url(menu_indicator.png);
subcontrol-origin: padding;
subcontrol-position: bottom right;
}
QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {
position: relative;
top: 2px; left: 2px;
}
QSlider：
下面的橫向的slider
QSlider::groove:horizontal {
border: 1px solid #999999;
height: 8px;
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
margin: 2px 0;
}
QSlider::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
border: 1px solid #5c5c5c;
width: 18px;
margin: -2px 0;
border-radius: 3px;
}
QSlider::groove:vertical {
background: red;
position: absolute;
left: 4px; right: 4px;
}
QSlider::handle:vertical {
height: 10px;
background: green;
margin: 0 -4px;
}
QSlider::add-page:vertical {
background: white;
}
QSlider::sub-page:vertical {
background: pink;
}
QSizeGrip：
一般講通過一個圖片進行設定 ：
QSizeGrip {
image: url(:/images/sizegrip.png);
width: 16px;
height: 16px;
}
定製QSplitter：
QSplitter::handle {
image: url(images/splitter.png);
}
QSplitter::handle:horizontal {
height: 2px;
}
QSplitter::handle:vertical {
width: 2px;
}
QStatusBar：
將提供一個狀態列的邊框與專案的定製：
QStatusBar {
background: brown;
}
QStatusBar::item {
border: 1px solid red;
border-radius: 3px;
}
QTabWidget與QTabBar：
QTabWidget::pane {
border-top: 2px solid #C2C7CB;
}
QTabWidget::tab-bar {
left: 5px; }
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #C2C7CB;
}
QTabBar::tab:!selected {
margin-top: 2px;
}
QTabWidget::pane {
border-top: 2px solid #C2C7CB;
}
QTabWidget::tab-bar {
left: 5px;
}
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #C2C7CB;
}
QTabBar::tab:!selected {
margin-top: 2px;
}
QTabBar::tab:selected {
margin-left: -4px;
margin-right: -4px;
}
QTabBar::tab:first:selected {
margin-left: 0;
}
QTabBar::tab:last:selected {
margin-right: 0;
}
QTabBar::tab:only-one {
margin: 0;
}
QTabWidget::pane {
border-top: 2px solid #C2C7CB;
position: absolute;
top: -0.5em;
}
QTabWidget::tab-bar {
alignment: center;
}
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #C2C7CB;
}
定製QTableWidget
下面將設定QTableWidget 的粉色選中區域， 與白色背景。
QTableWidget {
selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,
stop: 0 #FF92BB, stop: 1 white);
}
QTableWidget QTableCornerButton::section {
background: red;
border: 2px outset red;
}
QToolBox：
下面是對工具條的一些選項進行定製
QToolBar {
background: red;
spacing: 3px;
}
QToolBar::handle {
image: url(handle.png); //可以設定工具條的背景圖片
}
定製QToolBox
將使用到 tab 的子控部分
QToolBox::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border-radius: 5px;
color: darkgray;
}
QToolBox::tab:selected {
font: italic;
color: white;
}
定製QToolButton
QToolButton {
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
}
QToolButton[popupMode="1"] {
padding-right: 20px;
}
QToolButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
QToolButton::menu-button {
border: 2px solid gray;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
width: 16px;
}
QToolButton::menu-arrow {
image: url(downarrow.png);
}
QToolButton::menu-arrow:open {
top: 1px; left: 1px;
}
QTreeView：
QTreeView::branch {
background: palette(base);
}
QTreeView::branch:has-siblings:!adjoins-item {
background: cyan;
}
QTreeView::branch:has-siblings:adjoins-item {
background: red;
}
QTreeView::branch:!has-children:!has-siblings:adjoins-item {
background: blue;
}
QTreeView::branch:closed:has-children:has-siblings {
background: pink;
}
QTreeView::branch:has-children:!has-siblings:closed {
background: gray;
}
QTreeView::branch:open:has-children:has-siblings {
background: magenta;
}
QTreeView::branch:open:has-children:!has-siblings {
background: green;
}