一、qss簡介與應(yīng)用

??Qt Style Sheets ，簡寫是QSS，Qt樣式表，用于修改控件外觀，美化界面。它類似于前端的CSS（Cascading Style Sheets）但專門用于Qt應(yīng)用程序。QSS允許開發(fā)者通過樣式表來控制窗口部件的外觀和感覺，而無需修改應(yīng)用程序的源代碼。

qss的簡介與應(yīng)用詳細(xì)可參考：Qt開發(fā) | qss介紹 | 常用樣式 | 控件樣式應(yīng)用 | qss選擇器

二、QLineEdit qss介紹與使用

??常用屬性設(shè)置

setReadOnly(false);  // 只讀
setFocusPolicy(Qt::NoFocus); // 設(shè)置控件的焦點(diǎn)策略：無法獲得焦點(diǎn)
setMaxLength(10); // 最多輸入10個(gè)字符
setEchoMode(QLineEdit::Password); //設(shè)置行編輯的回顯模式為密碼模式-6

??=文本對(duì)齊方式

lineedit->setAlignment(Qt::AlignLeft)    //左對(duì)齊 
lineedit->setAlignment(Qt::AlignRight)   //右對(duì)齊  
lineedit->setAlignment(Qt::AlignCenter)  //居中對(duì)齊 

??正則控制輸入。例如：第一個(gè)數(shù)是1-9的，第二個(gè)數(shù)和之后的是0-9的

QRegExp regx("\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\\.)+[A-Za-z]{2,14}");	//郵箱正則
QValidator *validator = new QRegExpValidator(regx, ui->lineEdit);
lineEdit->setValidator(validator);	//設(shè)置行編輯值的驗(yàn)證器為正則，滿足正則的輸入才為有效值

??樣式設(shè)置

qss代碼

QLineEdit{border: 1px solid #ABCDA0;      /* 邊框?qū)挾葹?px，顏色為#A0A0A0 */border-radius: 3px;         /* 邊框圓角 */padding-left: 5px;           /* 文本距離左邊界有5px */background-color: #F2F2F2;     /* 背景顏色 */color: #A0A0A0;     /* 文本顏色 */selection-background-color: #A0A0A0;     /* 選中文本的背景顏色 */selection-color: #F2F2F2;    /* 選中文本的顏色 */font-family: "Microsoft YaHei";    /* 文本字體族 */font-size: 10pt;    /* 文本字體大小 */
}QLineEdit:hover { /* 鼠標(biāo)懸浮在QLineEdit時(shí)的狀態(tài) */border: 1px solid #298DFF;border-radius: 3px;background-color: #F2F2F2;color: #298DFF;selection-background-color: #298DFF;selection-color: #F2F2F2;
}/*0為正常顯式，1為ubuntu模式下，2為密碼顯式，3為ubuntu下的密碼顯式--看不到輸入內(nèi)容*/
/*與方法setEchoMode(QLineEdit::EchoMode)一起使用*/
QLineEdit[echoMode="2"] { /* QLineEdit有輸入掩碼時(shí)的狀態(tài) */lineedit-password-character: 9679;lineedit-password-mask-delay: 2000;
}QLineEdit:disabled { /* QLineEdit在禁用時(shí)的狀態(tài) */border: 1px solid #CDCDCD;background-color: #CDCDCD;color: #B4B4B4;
}QLineEdit:read-only { /* QLineEdit在只讀時(shí)的狀態(tài) */background-color: #CDCDCD;color: #F2F2F2;
}

三、QPushButton qss

1.常用qss

1.1 基本樣式表

??基本樣式表示例如下：

QPushButton
{  /* 前景色, 文字的顏色 */  color:green;  /* 背景色 */  background-color:rgb(223,223,223);  /* 邊框風(fēng)格 */  border-style:outset;  /* 邊框?qū)挾?*/  border-width:0.5px;  /* 邊框顏色 */  border-color:rgb(10,45,110);  /* 邊框倒角 */  border-radius:10px;  /* 字體 */  font:bold 22px;  /* 控件最小寬度 */  min-width:100px;  /* 控件最小高度 */  min-height:20px;  /* 內(nèi)邊距 */  padding:4px;  
} /* 鼠標(biāo)按下時(shí)的效果，這里指定了對(duì)象名稱 */ 
QPushButton#pushButton:pressed 
{  /* 改變背景色 */  background-color:rgb(40,85,20);  /* 改變邊框風(fēng)格 */  border-style:inset;  /* 使文字有一點(diǎn)移動(dòng) */  padding-left:6px;  padding-top:6px;  
}/* 按鈕樣式 */ 
QPushButton:flat 
{  border:2px solid red;  
} /*鼠標(biāo)懸浮時(shí)的效果*/
QPushButton:hover
{color:#0000ff;background-color:rgb(210, 205, 205); /*改變背景色*/border-style:inset;/*改變邊框風(fēng)格*/padding-left:8px;padding-top:8px;
}

效果圖：

懸浮時(shí)：

點(diǎn)擊時(shí)：

??還可以單獨(dú)指定按鈕，用#標(biāo)明例如：

/*鼠標(biāo)懸浮時(shí)的效果*/
QPushButton#btn2:hover
{color:#0000ff;background-color:rgb(100, 100, 20); /*改變背景色*/border-style:inset;/*改變邊框風(fēng)格*/padding-left:8px;padding-top:8px;
}

??相關(guān)狀態(tài)有

:checked      button部件被選中
:unchecked    button部件未被選中
:disabled     部件被禁用
:enabled      部件被啟用
:focus        部件獲得焦點(diǎn)
:hover        鼠標(biāo)位于部件上
:pressed      部件被鼠標(biāo)按下
:indeterminate    checkbox或radiobutton被部分選中
:off              部件可以切換，且處于off狀態(tài)
:on               部件可以切換，且處于on狀態(tài)

??當(dāng)按鈕被禁用后（ui->pushButton->setEnabled(false);）

QPushButton:disabled
{color: blue;border-color: brown;background-color: #363636;
}

1.2 背景圖片

??若要添加按鈕的背景圖片，則使用如下qss代碼

QPushButton
{background-image:url(":/resources/user.png");background-position:center;background-repeat: no-repeat;border:none
}QPushButton:hover
{background-color:rgb(10,210,210);background-image:url(":/resources/user_hover.png")
}QPushButton:pressed
{background-color:rgb(255, 0, 0);background-image:url(":/resources/user.png");padding-left:8px;padding-top:8px;
}

svg 矢量圖 ：可以隨著控件大小而改變，不會(huì)失真。做項(xiàng)目時(shí)，產(chǎn)品要提供6張圖：正常狀態(tài)、懸浮狀態(tài)、點(diǎn)擊狀態(tài)（vip/非vip各一套）

效果圖：

懸浮時(shí)：

點(diǎn)擊時(shí)：

1.3 圖片在左文字在右

??按鈕要實(shí)現(xiàn)這種樣式，需要利用QWidget類的void setLayoutDirection(Qt::LayoutDirection direction)方法來設(shè)置控件布局方向?qū)傩浴?code>Qt::LayoutDirection 是一個(gè)枚舉類型，它有兩個(gè)值：

• Qt::LeftToRight：默認(rèn)值，表示布局方向是從左到右。
• Qt::RightToLeft：表示布局方向是從右到左

qt代碼：

ui->pushButton_3->setText(u8"會(huì)員");
ui->pushButton_3->setFixedSize(80, 64);
ui->pushButton_3->setIcon(QIcon(":/resources/vip_yes.png"));
ui->pushButton_3->setLayoutDirection(Qt::LeftToRight);

效果圖為：

??還可以用樣式表實(shí)現(xiàn)這樣的效果

ui->pushButton_4->setFixedSize(200, 64);
ui->pushButton_4->setText(u8"非會(huì)員");
QString btnStyle = "QPushButton{""background-image: url(:/resources/vip_no.png);""background-repeat: no-repeat;""background-origin: padding;""background-position: left;""padding-left:65px;""border: none;""background-color: rgb(0, 255, 255);""color:rgb(0, 0, 0);""text-align:left;""font: bold italic 30px \"Microsoft YaHei\";"
"}";ui->pushButton_4->setStyleSheet(btnStyle);

注意：若要使用按鈕做圖片在上文字在下的布局，則

??因?yàn)镼PushButton繼承于QWidget，圖片在上文字在下的布局就等于兩個(gè)QLabel的豎直布局

2.點(diǎn)擊按鈕彈出菜單以及右側(cè)箭頭樣式設(shè)置

• QPushButton如何設(shè)置菜單

  調(diào)用QPushButton的setMenu方法

  void setMenu(QMenu* menu);
  

• 按鈕菜單寫法

  • 錯(cuò)誤的寫法

    在按鈕槽函數(shù)里寫按鈕彈出菜單，此時(shí)按鈕需要點(diǎn)兩次才彈出菜單

  • 正確的寫法

    在按鈕槽函數(shù)外面寫，例如構(gòu)造函數(shù)里面寫

• 如何創(chuàng)建菜單

  QMenu（菜單類）添加多個(gè)QAction（菜單項(xiàng)）構(gòu)成菜單。

  m_pRightMenu = new QMenu(this);QAction *pAction1 = new QAction("查看");
  QAction *pAction2 = new QAction("排序方式");
  QAction *pAction3 = new QAction("刷新");m_pRightMenu->addAction(pAction1);
  m_pRightMenu->addAction(pAction2);
  m_pRightMenu->addAction(pAction3);
  

• 如何創(chuàng)建多級(jí)菜單

  QMenu（菜單類）除了可以添加action構(gòu)成菜單，QMenu可以添加QMenu構(gòu)成多級(jí)菜單

  QMenu *setMenuItems = new QMenu;QAction *sysSetAc = new QAction(u8"系統(tǒng)設(shè)置", this);
  QAction *playSetAc = new QAction(u8"播放設(shè)置", this);
  QAction *zimuSetAc = new QAction(u8"字幕設(shè)置", this);
  setList << sysSetAc << playSetAc << zimuSetAc;setMenuItems->addActions(setList);m_pRightMenu->addMenu(setMenuItems);
  

• 菜單action響應(yīng)

  QAction的響應(yīng)需要鏈接信號(hào)triggered

示例：

widget.h：

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();private:Ui::Widget *ui;
};
#endif // WIDGET_H

widget.cpp：

#include "widget.h"
#include "ui_widget.h"
#include <QMenu>
#include <QAction>
#include <QFileDialog>
#include <string>using namespace std;Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QMenu *pMenu = new QMenu;  //主菜單QMenu *fileMenuItems = new QMenu;//菜單添加iconfileMenuItems->setIcon(QIcon(":/resources/file.png"));fileMenuItems->setTitle(u8"文件");QList<QAction*> acList;// action添加iconQAction *openFileAc = new QAction(QIcon(":/resources/file.png"), u8"打開文件", this);//openFileAc->setShortcuts(QKeySequence::Print);       //設(shè)置快捷鍵openFileAc->setShortcut(QKeySequence("Ctrl+8"));  //隨意指定快捷鍵QAction *openFloderAc = new QAction(u8"打開文件夾", this);QAction *openUrlAc = new QAction(u8"打開url", this);//多級(jí)子菜單項(xiàng)acList << openFileAc << openFloderAc << openUrlAc;fileMenuItems->addActions(acList);pMenu->addMenu(fileMenuItems);QAction *play = new QAction(QIcon(":/resources/play.png"), u8"播放", this);QAction *tools = new QAction(QIcon(":/resources/tools.png"), u8"工具", this);pMenu->addAction(play);pMenu->addAction(tools);pMenu->addSeparator();QMenu *setMenuItems = new QMenu;setMenuItems->setTitle(u8"設(shè)置");setMenuItems->setIcon(QIcon(":/resources/set.png"));QList<QAction*> setList;QAction *sysSetAc = new QAction(u8"系統(tǒng)設(shè)置", this);QAction *playSetAc = new QAction(u8"播放設(shè)置", this);QAction *zimuSetAc = new QAction(u8"字幕設(shè)置", this);setList << sysSetAc << playSetAc << zimuSetAc;setMenuItems->addActions(setList);pMenu->addMenu(setMenuItems);pMenu->addSeparator();QAction *exitAc = new QAction(QIcon(":/resources/exit.png"), u8"退出", this);pMenu->addAction(exitAc);ui->pushButton->setMenu(pMenu);connect(openFileAc, &QAction::triggered, [=]{QString fileName = QFileDialog::getOpenFileName(this,u8"請(qǐng)選擇視頻文件","D:/","視頻(*.mp4 *.flv);;");if(fileName.isEmpty()){return;}});//R字符串寫樣式string menu_qss = R"(QMenu::item{font:16px;background-color:rgb(25,253,253);padding:8px 32px;margin:8px 8px;border-bottom:1px solid #FF0000;   /*底部邊界*/}/*選擇項(xiàng)設(shè)置*/QMenu::item:selected{background-color: #00FF00;})";pMenu->setStyleSheet(QString::fromStdString(menu_qss));
}Widget::~Widget()
{delete ui;
}

main.cpp：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);Widget w;w.show();return a.exec();
}

運(yùn)行結(jié)果：

??使用頭文件來引入樣式修改上述效果圖

qss.h：

#ifndef QSS_H
#define QSS_H#include <string>using namespace std;//按鈕樣式--按鈕可展開下拉菜單與不展開時(shí)的設(shè)置
string button_qss = R"(QPushButton{font:18px "Microsoft YaHei";color:rgb(255,255,255);border:none}/*定義 QPushButton 控件在菜單指示器打開狀態(tài)下的樣式*/QPushButton::menu-indicator:open{image:url(:/resources/down_arrow.svg);subcontrol-position:right center;	/*定義了下拉菜單指示器在按鈕中的位置*/subcontrol-origin:padding;border:none; /*定義了子控件（菜單指示器）的定位基準(zhǔn)點(diǎn)*/}/*定義 QPushButton 控件在菜單指示器關(guān)閉狀態(tài)下的樣式*/QPushButton::menu-indicator:closed{image:url(:/resources/up_arrow.svg);subcontrol-position:right center;subcontrol-origin:padding;border:none;}
)";/*菜單樣式--*/
string menuQss = R"(QMenu{background-color:rgb(53, 63, 73);}QMenu::item{font:16px;color:white;background-color:rgb(53, 63, 73);padding:8px 32px;margin:8px 8px;/*border-bottom:1px solid #DBDBDB;  item底部顏色*/}/*選擇項(xiàng)設(shè)置*/QMenu::item:selected{background-color:rgb(54, 54, 54);}
)";/*菜單子項(xiàng)樣式--*/
string menuItemQss = R"(QMenu{background-color:rgb(73, 73, 73);}QMenu::item{font:16px;color:white;background-color:rgb(73, 73, 73);padding:8px 32px;margin:8px 8px;/*border-bottom:1px solid #DBDBDB;  item底部顏色*/}/*選擇項(xiàng)設(shè)置*/QMenu::item:selected{background-color:rgb(54, 54, 54);}
)";#endif // QSS_H

widget.cpp：

#include "widget.h"
#include "ui_widget.h"
#include <QMenu>
#include <QAction>
#include <QFileDialog>
#include "qss.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);this->setStyleSheet("background-color:rgb(54,54,54)");  //窗體背景色QMenu *fileMenuItems = new QMenu;//菜單添加iconfileMenuItems->setIcon(QIcon(":/resources/file.png"));fileMenuItems->setTitle(u8"文件");fileMenuItems->setStyleSheet(QString::fromStdString(menuItemQss));QList<QAction*> acList;// action添加iconQAction *openFileAc = new QAction(QIcon(":/resources/file.png"), u8"打開文件", this);//openFileAc->setShortcuts(QKeySequence::Print);       //設(shè)置快捷鍵openFileAc->setShortcut(QKeySequence("Ctrl+8"));  //隨意指定快捷鍵QAction *openFloderAc = new QAction(u8"打開文件夾", this);QAction *openUrlAc = new QAction(u8"打開url", this);//多級(jí)子菜單項(xiàng)acList << openFileAc << openFloderAc << openUrlAc;fileMenuItems->addActions(acList);QMenu *pMenu = new QMenu;  //主菜單pMenu->addMenu(fileMenuItems);QAction *play = new QAction(QIcon(":/resources/play.png"), u8"播放", this);QAction *tools = new QAction(QIcon(":/resources/tools.png"), u8"工具", this);pMenu->addAction(play);pMenu->addAction(tools);pMenu->addSeparator();QMenu *setMenuItems = new QMenu;setMenuItems->setTitle(u8"設(shè)置");setMenuItems->setIcon(QIcon(":/resources/set.png"));QList<QAction*> setList;QAction *sysSetAc = new QAction(u8"系統(tǒng)設(shè)置", this);QAction *playSetAc = new QAction(u8"播放設(shè)置", this);QAction *zimuSetAc = new QAction(u8"字幕設(shè)置", this);setList << sysSetAc << playSetAc << zimuSetAc;setMenuItems->addActions(setList);setMenuItems->setStyleSheet(QString::fromStdString(menuItemQss));pMenu->addMenu(setMenuItems);pMenu->addSeparator();QAction *exitAc = new QAction(QIcon(":/resources/exit.png"), u8"退出", this);pMenu->addAction(exitAc);ui->pushButton->setMenu(pMenu); //設(shè)置菜單connect(openFileAc, &QAction::triggered, [=]{QString fileName = QFileDialog::getOpenFileName(this,u8"請(qǐng)選擇視頻文件","D:/","視頻(*.mp4 *.flv);;");if(fileName.isEmpty()){return;}});ui->pushButton->setText(u8"QW影音");ui->pushButton->setFixedSize(100, 32);ui->pushButton->setStyleSheet(QString::fromStdString(button_qss));pMenu->setStyleSheet(QString::fromStdString(menuQss));
}Widget::~Widget()
{delete ui;
}

運(yùn)行結(jié)果：

注意：菜單彈出的位置也可以控制

3.鼠標(biāo)懸浮按鈕彈出對(duì)話框

??要實(shí)現(xiàn)鼠標(biāo)懸浮按鈕彈出對(duì)話框，需要利用兩個(gè)事件：鼠標(biāo)進(jìn)入、離開事件

• 鼠標(biāo)進(jìn)入控件或窗口

  void enterEvent(QEvent* event) override;
  

• 鼠標(biāo)離開控件或窗口

  void leaveEvent(QEvent* event) override;
  

示例：

CVolumeSliderDialog.h：新建音量滑動(dòng)條對(duì)話窗口

#ifndef CVOLUMESLIDERDIALOG_H
#define CVOLUMESLIDERDIALOG_H#include <QDialog>
#include <QSlider>class CVolumeSliderDialog : public QDialog
{Q_OBJECTpublic:CVolumeSliderDialog(QWidget *parent = Q_NULLPTR);~CVolumeSliderDialog();void setSliderValue(int value){m_pSlider->setValue(value);}protected:bool event(QEvent* event) override;signals:void sig_SliderValueChanged(int value);private:QSlider* m_pSlider = nullptr;
};#endif

CVolumeSliderDialog.cpp：

#include "CVolumeSliderDialog.h"
#include <QVBoxLayout>
#include <QEvent>
#include <windows.h>//注意由于此類使用了windows的函數(shù)SetClassLong，需要包含user32.lib
//如果是在vs2019中使用則不需要包含user32.lib
#pragma comment(lib, "user32.lib")CVolumeSliderDialog::CVolumeSliderDialog(QWidget* parent): QDialog(parent)
{this->setFixedSize(40, 200);QVBoxLayout* pVLay = new QVBoxLayout(this);m_pSlider = new QSlider(this);m_pSlider->setOrientation(Qt::Vertical);pVLay->addWidget(m_pSlider);setFixedSize(40, 120);setWindowFlags(Qt::FramelessWindowHint | Qt::ToolTip);   //ToolTip = Popup | Sheet : 懸浮是顯示，離開時(shí)消失setStyleSheet("QDialog{background-color: rgba(54, 54, 54, 0.5);}");  //0.5表示透明度，0表示全透明、1表示不透明；也可以使用百分百表示如： frm->setStyleSheet(“QFrame{background-color: rgba(255, 0, 0, 50%);}”);connect(m_pSlider, &QSlider::valueChanged, [=](int value) {emit sig_SliderValueChanged(value);});
}CVolumeSliderDialog::~CVolumeSliderDialog()
{
}//參考qt文檔:bool QWidget::event(QEvent *event)
//設(shè)置popup后，dialog有窗口陰影，需要去除就重寫event函數(shù)
bool CVolumeSliderDialog::event(QEvent* event)
{static bool class_amended = false;if (event->type() == QEvent::WinIdChange){HWND hwnd = (HWND)winId();if (class_amended == false){class_amended = true;DWORD class_style = ::GetClassLong(hwnd, GCL_STYLE);class_style &= ~CS_DROPSHADOW;::SetClassLong(hwnd, GCL_STYLE, class_style); // windows系統(tǒng)函數(shù)}}return QWidget::event(event);
}

CVolumeButton.h：當(dāng)鼠標(biāo)進(jìn)入音量按鈕時(shí)，顯示音量滑動(dòng)條

/*
音量調(diào)節(jié)按鈕
功能：1. 鼠標(biāo)懸浮到音量時(shí)顯示slider dialog2. 點(diǎn)擊時(shí)mute
注意問題：重寫按鈕類，樣式表無效
*/#pragma once#include <QPushButton>
#include "CVolumeSliderDialog.h"class CVolumeButton : public QPushButton
{Q_OBJECTpublic:CVolumeButton(QWidget* parent = nullptr);~CVolumeButton();bool getMute() const{return m_isMute;}void setMute(bool mute) { m_isMute = mute; }signals:void sig_VolumeValue(int value);protected:void paintEvent(QPaintEvent* event) override;void enterEvent(QEvent* event) override;//void leaveEvent(QEvent* event) override;void mousePressEvent(QMouseEvent* event) override;void timerEvent(QTimerEvent* event) override;private:bool m_isMute = false;  //是否靜音CVolumeSliderDialog* m_pVolumeSliderDlg = nullptr;int m_timerId = -1;
};

CVolumeButton.cpp：

#include "CVolumeButton.h"
#include <QMouseEvent>
#include <QStylePainter>
#include <QStyleOptionButton>
#include <iostream>
#include <QDebug>
#include <QThread>using namespace std;CVolumeButton::CVolumeButton(QWidget* parent): QPushButton(parent)
{this->setFixedSize(32,32);setStyleSheet("QPushButton{background-image:url(:/resources/audio_open.svg);border:none;}""QPushButton:hover{background-image:url(:/resources/audio_open_hover.svg);border:none;}""QPushButton:pressed{background-image:url(:/resources/audio_open.svg);border:none;}");
}CVolumeButton::~CVolumeButton()
{
}//重寫控件繪制的事件
void CVolumeButton::paintEvent(QPaintEvent*)
{QStylePainter p(this);  //與CVolumeButton對(duì)象（即this指針指向的對(duì)象）關(guān)聯(lián)QStyleOptionButton option;initStyleOption(&option); //將當(dāng)前控件的相關(guān)信息填充到option對(duì)象中p.drawControl(QStyle::CE_PushButton, option);   //使用QStylePainter對(duì)象p來繪制一個(gè)按鈕控件。//QStyle::CE_PushButton是一個(gè)枚舉值，表示要繪制的控件類型是按鈕。option對(duì)象包含了繪制按鈕所需的所有選項(xiàng)和狀態(tài)信息。
}//重寫鼠標(biāo)進(jìn)入控件的事件，移動(dòng)音量滑動(dòng)條控件
void CVolumeButton::enterEvent(QEvent* event)
{if (!m_pVolumeSliderDlg)m_pVolumeSliderDlg = new CVolumeSliderDialog(this);//將控件的局部坐標(biāo)轉(zhuǎn)化成全局屏幕坐標(biāo)，返回控件左上角像素點(diǎn)的全局屏幕坐標(biāo)QPoint p1 = this->mapToGlobal(QPoint(0, 0));  //聲音按鈕左上角相對(duì)于桌面的絕對(duì)位置// qDebug() << p1.x() << "    " << p1.y();QRect rect1 = this->rect(); //控件內(nèi)部集合形狀QRect rect2 = m_pVolumeSliderDlg->rect();     //rect包含標(biāo)題欄，去掉標(biāo)題欄后height不變int x = p1.x() + (rect1.width() - rect2.width()) / 2;int y = p1.y() - rect2.height() - 5;m_pVolumeSliderDlg->move(x, y);   //move是相對(duì)于桌面原點(diǎn)的位置m_pVolumeSliderDlg->show();//啟動(dòng)定時(shí)器返回計(jì)時(shí)器標(biāo)識(shí)符//當(dāng)計(jì)時(shí)器事件發(fā)生時(shí)，會(huì)調(diào)用timerEvent()虛函數(shù)，并將QTimerEvent事件參數(shù)類傳遞給它。m_timerId = startTimer(250);connect(m_pVolumeSliderDlg, &CVolumeSliderDialog::sig_SliderValueChanged, [=](int value) {emit sig_VolumeValue(value);});
}//void CVolumeButton::leaveEvent(QEvent* event)
//{
//	根據(jù)鼠標(biāo)的位置判斷音量調(diào)節(jié)窗口是否消失
//	//QPoint p1 = QCursor::pos();   //絕對(duì)位置
//
//	//cout << "QCursor x= " << p1.x() << " y = " << p1.y() << endl;
//
//	//if (m_pVolumeSliderDlg)
//	//{
//	//	QRect rect1 = this->rect();  //按鈕矩形
//	//	QRect rect2 = m_pVolumeSliderDlg->rect();
//	//	QRect rect3 = m_pVolumeSliderDlg->geometry();
//
//	//	QPoint p2 = this->mapToGlobal(QPoint(0, 0));   //聲音按鈕左上角相對(duì)于桌面的絕對(duì)位置
//
//	//	//已知：音量框?qū)?0 > 按鈕寬30
//	//	QRect area(rect3.left(), rect3.top(), rect2.width(), p2.y() + rect1.height() - rect3.top()); //左上寬高
//
//	//	cout << "p1 x = " << p1.x() << " y = " << p1.y() << endl;
//
//	//	if (!area.contains(p1))
//	//	{
//	//		m_pVolumeSliderDlg->hide();
//	//	}
//	//}
//}//重寫鼠標(biāo)按下事件；音量在靜音與正常狀態(tài)之間切換
void CVolumeButton::mousePressEvent(QMouseEvent* event)
{if (event->button() == Qt::LeftButton){m_isMute = !m_isMute;if (m_isMute){if (m_pVolumeSliderDlg)m_pVolumeSliderDlg->setSliderValue(0);}else{if (m_pVolumeSliderDlg)m_pVolumeSliderDlg->setSliderValue(50);}}
}/*** @brief 用定時(shí)器模擬leaveEvent，* 直接在leaveEvent里讓m_pVolumeSliderDlg消失，效果不太好，* 用鼠標(biāo)移動(dòng)事件也不太好，定時(shí)器是比較好的做法*/
void CVolumeButton::timerEvent(QTimerEvent* event)
{if ((m_pVolumeSliderDlg != nullptr) && (m_pVolumeSliderDlg->isVisible())){//判斷鼠標(biāo)的位置與有效區(qū)域的關(guān)系，若不在有效區(qū)域則隱藏音量滑動(dòng)條QPoint p1 = QCursor::pos();   //鼠標(biāo)絕對(duì)位置if (m_pVolumeSliderDlg){QRect rect1 = this->rect();  //按鈕矩形QRect rect2 = m_pVolumeSliderDlg->rect();       //獲取控件的內(nèi)部尺寸QRect rect3 = m_pVolumeSliderDlg->geometry();  //獲取窗口整體大小和位置QPoint p2 = this->mapToGlobal(QPoint(0, 0));   //聲音按鈕左上角相對(duì)于桌面的絕對(duì)位置//已知：音量框?qū)?0 > 按鈕寬30//QRect：矩形區(qū)域，矩形由其左上角的坐標(biāo)（x, y）、寬度和高度定義。QRect area(rect3.left(), rect3.top(), rect2.width(), p2.y() + rect1.height() - rect3.top()); //左上寬高if (!area.contains(p1)){m_pVolumeSliderDlg->hide();}}}else{killTimer(event->timerId());   //直到調(diào)用killTimer()函數(shù)，計(jì)時(shí)器事件會(huì)每隔interval毫秒發(fā)生一次}
}

widget.h：

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();private:Ui::Widget *ui;
};
#endif // WIDGET_H

widget.cpp：

#include "widget.h"
#include "ui_widget.h"
#include <QHBoxLayout>
#include "CVolumeButton.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);resize(800, 600);QHBoxLayout *pHlay = new QHBoxLayout(this);CVolumeButton* pVolumeButton = new CVolumeButton(this);pHlay->addWidget(pVolumeButton);
}Widget::~Widget()
{delete ui;
}

main.cpp：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);Widget w;w.show();return a.exec();
}

運(yùn)行結(jié)果：

四、QCheckBox qss妙用：實(shí)時(shí)打開關(guān)閉狀態(tài)按鈕

??使用QCheckBox 實(shí)現(xiàn)實(shí)時(shí)打開關(guān)閉狀態(tài)按鈕的效果，思路是：使用QCheckBox，點(diǎn)擊按鈕時(shí)切換背景圖片。

示例：

widget.h：

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();private:Ui::Widget *ui;
};
#endif // WIDGET_H

widget.cpp：

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->checkBox->setFixedSize(128, 64);//樣式表基于指示器的勾選狀態(tài)進(jìn)行切換QString qss = "QCheckBox::indicator:unchecked{ \image:url(:/resources/status_close.png); \} \QCheckBox::indicator:checked { \image: url(:/resources/status_open.png); \}";ui->checkBox->setStyleSheet(qss);ui->checkBox->setChecked(true); // 設(shè)置組框?yàn)楣催x狀態(tài)//ui->checkBox->setTristate(true);  //開啟三態(tài)//當(dāng)勾選狀態(tài)改變時(shí)，QCheckBox 會(huì)發(fā)出 clicked(bool) 和 stateChanged(int) 信號(hào)。connect(ui->checkBox, &QCheckBox::stateChanged , [=](int state){qDebug() << state;});
}Widget::~Widget()
{delete ui;
}

main.cpp：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);Widget w;w.show();return a.exec();
}

運(yùn)行效果：

五、QComboBox樣式表介紹

??QComboBox樣式需要注意的點(diǎn)如下：

• qss設(shè)置item項(xiàng)的高度

  除了使用qss代碼外，還要使用C++代碼控制

  qss代碼：

  /* 下拉后，整個(gè)下拉窗體每項(xiàng)的樣式 */
  /* 項(xiàng)的高度（設(shè)置pComboBox->setView(new QListView(this));后該項(xiàng)才起作用） */
  QComboBox QAbstractItemView::item 
  {height: 50px;   
  }
  

  qt代碼：

  ui->comboBox->setView(new QListView(this));
  

• 右側(cè)下拉框樣式

  /* 下拉框樣式 */
  QComboBox::drop-down 
  {subcontrol-origin: padding;   /* 子控件在父元素中的原點(diǎn)矩形。如果未指定此屬性，則默認(rèn)為padding。 */subcontrol-position: top right;   /* 下拉框的位置（右上） */width: 32px;   /* 下拉框的寬度 */border-left-width: 1px;   /* 下拉框的左邊界線寬度 */border-left-color: darkgray;   /* 下拉框的左邊界線顏色 */border-left-style: solid;   /* 下拉框的左邊界線為實(shí)線 */border-top-right-radius: 3px;   /* 下拉框的右上邊界線的圓角半徑（應(yīng)和整個(gè)QComboBox右上邊界線的圓角半徑一致） */border-bottom-right-radius: 3px;   /* 同上 */image: url(:/resources/down.png); 
  }
  

  注意：image才是箭頭的樣式，不是background-image

• 右側(cè)下拉箭頭樣式

  /* 下拉箭頭樣式 */ 
  QComboBox::down-arrow 
  {　　width: 32px; /* 下拉箭頭的寬度（建議與下拉框drop-down的寬度一致） */ 　　background: rgb(54,54,54); /* 下拉箭頭的的背景色 */ 　　padding: 0px 0px 0px 0px; /* 上內(nèi)邊距、右內(nèi)邊距、下內(nèi)邊距、左內(nèi)邊距 */　　image: url(:/resources/down.png); 
  } 
  

• QComboBox的編輯模式

  QComboBox默認(rèn)是非編輯模式，調(diào)用setEditable即可設(shè)為編輯模式。

  ui->comboBox->setEditable(true);
  

  在編輯模式下，輸入值按回車，即可將值添加到ComboBox中，默認(rèn)添加到最后

• QComboBox自定義排序

  在后續(xù)的模型代理視圖中繼續(xù)

示例：

樣式1：

qss代碼為：

/* 未下拉時(shí)，QComboBox的樣式 */
QComboBox 
{background:rgb(54,54,54);border: 1px solid gray;   /* 邊框 */border-radius: 5px;   /* 圓角 */padding: 1px 18px 1px 3px;   /* 字體填襯 */color: white;font: normal normal 24px "Microsoft YaHei";
}

樣式2：

qss代碼為

/* 未下拉時(shí)，QComboBox的樣式 */
QComboBox 
{border: 1px solid gray;   /* 邊框 */border-radius: 5px;   /* 圓角 */padding: 1px 18px 1px 3px;   /* 字體填襯 */color: white;font: normal normal 24px "Microsoft YaHei";background:rgb(54,54,54);
}/* 下拉后，整個(gè)下拉窗體樣式 */
QComboBox QAbstractItemView 
{outline: 0px solid gray;   /* 選定項(xiàng)的虛框 */border: 1px solid yellow;   /* 整個(gè)下拉窗體的邊框 */color: rgb(250,251,252);background-color: rgb(70,80,90);   /* 整個(gè)下拉窗體的背景色 */selection-background-color: lightgreen;   /* 整個(gè)下拉窗體被選中項(xiàng)的背景色 */
}/* 下拉后，整個(gè)下拉窗體每項(xiàng)的樣式 */
/* 項(xiàng)的高度（設(shè)置pComboBox->setView(new QListView(this));后該項(xiàng)才起作用） */
QComboBox QAbstractItemView::item 
{height: 50px;   
}/* 下拉后，整個(gè)下拉窗體越過每項(xiàng)的樣式 */
QComboBox QAbstractItemView::item:hover 
{color: rgb(90,100,105);background-color: lightgreen;   /* 整個(gè)下拉窗體越過每項(xiàng)的背景色 */
}/* 下拉后，整個(gè)下拉窗體被選擇的每項(xiàng)的樣式 */
QComboBox QAbstractItemView::item:selected 
{color: rgb(12, 23, 34);background-color: lightgreen;
}/* QComboBox中的垂直滾動(dòng)條 */
QComboBox QAbstractScrollArea QScrollBar:vertical 
{width: 13px;background-color: #d0d2d4;   /* 空白區(qū)域的背景色*/
}QComboBox QAbstractScrollArea QScrollBar::handle:vertical 
{border-radius: 5px;   /* 圓角 */background: rgb(60,60,60);   /* 小方塊的背景色深灰lightblue */
}QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover 
{background: rgb(90, 91, 93);   /* 越過小方塊的背景色yellow */
}/* 設(shè)置為可編輯（setEditable(true)）editable時(shí)，編輯區(qū)域的樣式 */
QComboBox:editable 
{background: green;
}/* 設(shè)置為非編輯（setEditable(false)）!editable時(shí)，整個(gè)QComboBox的樣式 */
QComboBox:!editable 
{background: rgb(54,54,54);
}/* 設(shè)置為可編輯editable時(shí)，點(diǎn)擊整個(gè)QComboBox的樣式 */
QComboBox:editable:on 
{background: rgb(54,54,54);
}/* 設(shè)置為非編輯!editable時(shí)，點(diǎn)擊整個(gè)QComboBox的樣式 */
QComboBox:!editable:on 
{background: rgb(54,54,54);
}/* 設(shè)置為可編輯editable時(shí)，下拉框的樣式 */
QComboBox::drop-down:editable 
{background: rgb(54,54,54);
}/* 設(shè)置為可編輯editable時(shí)，點(diǎn)擊下拉框的樣式 */
QComboBox::drop-down:editable:on 
{background: rgb(54,54,54);
}/* 設(shè)置為非編輯!editable時(shí)，下拉框的樣式 */
QComboBox::drop-down:!editable 
{background: rgb(54,54,54);
}/* 設(shè)置為非編輯!editable時(shí)，點(diǎn)擊下拉框的樣式 */
QComboBox::drop-down:!editable:on 
{background: rgb(54,54,54);image: url(:/resources/up.png); /* 顯示上拉箭頭 */ 
}/* 下拉框樣式 */
QComboBox::drop-down 
{subcontrol-origin: padding;   /* 子控件在父元素中的原點(diǎn)矩形。如果未指定此屬性，則默認(rèn)為padding。 */subcontrol-position: top right;   /* 下拉框的位置（右上） */width: 32px;   /* 下拉框的寬度 */border-left-width: 1px;   /* 下拉框的左邊界線寬度 */border-left-color: darkgray;   /* 下拉框的左邊界線顏色 */border-left-style: solid;   /* 下拉框的左邊界線為實(shí)線 */border-top-right-radius: 3px;   /* 下拉框的右上邊界線的圓角半徑（應(yīng)和整個(gè)QComboBox右上邊界線的圓角半徑一致） */border-bottom-right-radius: 3px;   /* 同上 */image: url(:/resources/down.png); 
}/* 越過下拉框樣式 */
QComboBox::drop-down:hover 
{background: rgb(80, 75, 90);
}/* 下拉箭頭樣式 */ 
QComboBox::down-arrow 
{　　width: 32px; /* 下拉箭頭的寬度（建議與下拉框drop-down的寬度一致） */ 　　background: rgb(54,54,54); /* 下拉箭頭的的背景色 */ 　　padding: 0px 0px 0px 0px; /* 上內(nèi)邊距、右內(nèi)邊距、下內(nèi)邊距、左內(nèi)邊距 */　　image: url(:/resources/down.png); 
} /* 點(diǎn)擊下拉箭頭 */ 
QComboBox::down-arrow:on 
{ 　　image: url(:/resources/up.png); /* 顯示上拉箭頭 */ 
}

六、QProgressBar用法及qss

??QProgressBar 是 Qt 框架中的進(jìn)度條控件，用于顯示任務(wù)的進(jìn)度。通常用來表示加載數(shù)據(jù)、文件傳輸或其他需要時(shí)間的任務(wù)的進(jìn)度。

1. 水平樣式1

??QProgressBar默認(rèn)是水平效果。

qss代碼：

QProgressBar
{background:rgb(54,54,54);border:none;   /*無邊框*/border-radius:5px;text-align:center;   /*文本的位置*/color: rgb(229, 229, 229);  /*文本顏色*/
}/*chunk表示里面的進(jìn)度條*/
QProgressBar::chunk 
{background-color:rgb(58, 154, 255);border-radius:4px;
}

2.水平樣式2

??效果圖：

qss代碼

QProgressBar
{border-radius:5px;background-color:darkgray;text-align:center
}QProgressBar::chunk
{background-color:#1F0FEF;width:6px;margin:5px;	/*相鄰進(jìn)度間距離為5*/
}

3.豎直樣式表

??C++設(shè)置：

ui->progressBar_2->setOrientation(Qt::Vertical);
ui->progressBar_2->setFixedWidth(60);
ui->progressBar_2->setFixedHeight(300);

例如下面的效果

qss代碼

QProgressBar:vertical
{border-radius:5px;background-color:darkgray;text-align:center;padding-left: 5px; padding-right: 4px; padding-bottom: 2px; 
}QProgressBar::chunk:vertical
{background-color:#06B025;margin:1px;
}

4.其它豎直樣式–漸變色

??漸變色

qss代碼

QProgressBar:vertical
{border-radius:5px;background-color:darkgray;text-align:center;padding-left: 5px; padding-right: 4px; padding-bottom: 2px; 
}QProgressBar::chunk:vertical
{/*QLinearGradient表示使用漸變色*/background-color:QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #00ff58,stop: 1 #034f1f);margin:1px;
}

七、QSlider樣式表介紹

??滑塊經(jīng)常用到，如：聲音調(diào)節(jié)、視頻進(jìn)度調(diào)節(jié)等，有水平與豎直兩種。

效果圖：

水平的QSlider的qss：

QSlider
{background-color: #363636; border-style: outset; border-radius: 10px; 
}
/*凹槽的樣式*/
QSlider::groove:horizontal
{height: 12px;background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);margin: 2px 0
}/*柄的樣式*/
QSlider::handle:horizontal 
{background: QRadialGradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green);width: 16px;height: 16px;margin: -5px 6px -5px 6px;border-radius:11px; border: 3px solid #ffffff;
}

豎直的QSlider的qss：

QSlider 
{background-color: rgba(22, 22, 22, 0.7);padding-top: 15px;  /*上面端點(diǎn)離頂部的距離*/padding-bottom: 15px;border-radius: 5px; /*外邊框矩形倒角*/
}QSlider::add-page:vertical 
{background-color: #FF7826;width:5px;border-radius: 2px;
}QSlider::sub-page:vertical 
{background-color: #7A7B79;width:5px;border-radius: 2px;
}QSlider::groove:vertical 
{background:transparent;width:6px;
}QSlider::handle:vertical    
{height: 14px;  width: 14px;margin: 0px -4px 0px -4px;border-radius: 7px;background: white;
}

八、qss加載方式詳解

九、控件提升

十、Qt鼠標(biāo)相對(duì)位置、絕對(duì)位置、窗口位置、控件位置、控件大小、控件絕對(duì)位置

十一、自定義QLineEdit實(shí)現(xiàn)搜索編輯框

十二、自定義QTabWidget實(shí)現(xiàn)tab在左，文本水平