肃宁县网站建设公司,外贸英文网站模板,沈阳网页设计哪家好,怎样做一个网页1. qss 简介
Qt style sheet#xff08;qss#xff0c;Qt 样式表#xff09;#xff0c;不需要用 C 代码控件进行重载#xff0c;就可以修改控件外观#xff0c;类似于前端的 css
2. qss 选择器
2.1 通配符选择器
/* 设置后控件窗口背景色都被修改为黄色 */
* {backg…1. qss 简介
Qt style sheetqssQt 样式表不需要用 C 代码控件进行重载就可以修改控件外观类似于前端的 css
2. qss 选择器
2.1 通配符选择器
/* 设置后控件窗口背景色都被修改为黄色 */
* {background-color:yellow;
}/* 指明子类 */
* QPushButton{background-color:yellow;
}2.2 类型选择器
/* 通过控件类型来匹配控件的 (包括子类) */
QWidget {background-color:yellow
}/* 禁止父窗口影响子窗口样式 (不包括子类) */
setAttribute(Qt::WA_StyledBackground);/* 在类前面加个 .(不包括子类)这样就只对 QWidget 生效如果界面上有其它控件则不生效 */
.QWidget {background-color:yellow
}2.3 ID 选择器
ID 选择器是结合控件的 objectname 来匹配控件的qss 里 objectname 前加个 “#” 来表示/* 只对 pushButton_2 有效*/
QPushButton#pushButton_2 {background-color:blue
}2.4 属性选择器
属性选择器是结合控件的属性值来匹配控件的首先要设定控件的属性qss 里属性用 [proterty attitude] 来限制label1.setProperty(notice_level, error)
label2.setProperty(notice_level, warning).QLabel {background-color:pink;
}.QLabel[notice_levelwarning] {border:5px solid yellow;
}.QLabel[notice_levelerror] {border:5px solid red;
}3. QLabel
/* 设置普通样式 */
QLabel {font-family: Microsoft YaHei; /*字体类型*/font-size: 18px; /*字体大小*/color: #BDC8E2; /*字体颜色*/ font-style: normal; /*字体斜体样式*/font-weight: normal; /*字体加粗样式*//*设置边框属性*/border-style: solid;border-width: 2px;border-color: aqua;border-radius: 20px;/*设置文字显示位置*/padding-left: 20px;padding-top: 3px;/*设置背景样式*/background-color: #2E3648;background-image: url(./res/image/123.png);background-repeat: no-repeat;background-position: left center;
}/* 设置鼠标悬浮样式*/
QLabel:hover {color: red;border-color: green;background-color: aqua;
}/* 设置禁止样式 */
QLabel:disabled {color: blue;border-color: brown;background-color: #363636;
}4. QLineEdit widget.ui qss 样式
QWidget{background-color:rgb(54,54,54);
}QLineEdit{border: 1px solid #ABCDA0; /* 边框宽度为1px颜色为#A0A0A0 */border-radius: 3px; /* 边框圆角 */padding-left: 5px; /* 文本距离左边界有5px */background-color: #F2F2F2; /* 背景颜色 */color: black; /* 文本颜色 */selection-background-color: #A0A0A0; /* 选中文本的背景颜色 */selection-color: #F2F2F2; /* 选中文本的颜色 */font-family: Microsoft YaHei; /* 文本字体族 */font-size: 10pt; /* 文本字体大小 */
}QLineEdit:hover { /* 鼠标悬浮在QLineEdit时的状态 */border: 1px solid #298DFF;border-radius: 3px;background-color: #F2F2F2;color: #298DFF;selection-background-color: #298DFF;selection-color: #F2F2F2;
}QLineEdit[echoMode2] { /* QLineEdit有输入掩码时的状态 */lineedit-password-character: 9679;lineedit-password-mask-delay: 2000;
}QLineEdit:disabled { /* QLineEdit在禁用时的状态 */border: 1px solid #CDCDCD;background-color: #CDCDCD;color: #B4B4B4;
}QLineEdit:read-only { /* QLineEdit在只读时的状态 */background-color: #CDCDCD;color: #F2F2F2;
}widget.h
#ifndef WIDGET_H
#define WIDGET_H#include QWidgetQT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget();private slots:void on_lineEdit_rex_returnPressed();void on_lineEdit_rex_inputRejected();void on_btnCheck_clicked();private:Ui::Widget *ui;
};
#endif // WIDGET_Hwidget.cpp
#include widget.h
#include ui_widget.h
#include QRegExpValidator // 使用正则表达式限制输入
#include QDebug
#include QMessageBoxWidget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {ui-setupUi(this);ui-lineEdit_1-setText(Hello LineEdit);ui-lineEdit_2-setReadOnly(true); // 设置为只读状态ui-lineEdit_2-setText(Hello LineEdit);ui-lineEdit_3-setText(Hello LineEdit);ui-lineEdit_3-setEchoMode(QLineEdit::Password); // 设置密码为圆点隐藏状态ui-lineEdit_4-setDisabled(true); // 设置为不可用状态// 使用正则表达式QRegExp来验证电子邮件地址的格式QRegExp regx(\\w[-\\w.]*([A-Za-z0-9][-A-Za-z0-9]\\.)[A-Za-z]{2,14});// 指定验证的目标为 ui-lineEdit_rex一个文本输入框QValidator *validator new QRegExpValidator(regx, ui-lineEdit_rex);// 将验证器应用到 lineEdit_rex上这样用户在该输入框中输入文本时将根据正则表达式进行验证ui-lineEdit_rex-setValidator(validator);
}Widget::~Widget() {delete ui;
}// 当用户在 lineEdit_rex 中按下回车键并释放时触发这个函数
void Widget::on_lineEdit_rex_returnPressed() {qDebug() on_lineEdit_rex_returnPressed;
}// 当 lineEdit_rex 中的输入被验证器拒绝时触发这个函数
void Widget::on_lineEdit_rex_inputRejected() {qDebug() on_lineEdit_rex_inputRejected;
}// 获取 lineEdit_rex 文本框的验证器并根据输入的文本内容进行验证
void Widget::on_btnCheck_clicked() {// 验证器 validator 用于限制用户输入的内容符合特定的模式或规则const QValidator *v ui-lineEdit_rex-validator();int pos 0;// 获取 lineEdit_rex 文本框中的文本内容QString text ui-lineEdit_rex-text();// 用于检查刚才获取的文本内容是否满足验证器的要求if (v-validate(text, pos) ! QValidator::Acceptable) {ui-lineEdit_rex-setText(QString::fromLocal8Bit(邮箱格式不正确));} else {QMessageBox::information(this, u8标题, u8邮箱格式正确);}
}5. QPushButton
5.1 点击按钮弹出菜单 widget.cpp
#include widget.h
#include ui_widget.h
#include QMenu
#include QAction
#include QFileDialog
#include qss.hWidget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {ui-setupUi(this);this-setStyleSheet(background-color:rgb(54,54,54));// 1、创建 文件 菜单项QMenu *fileMenuItems new QMenu;fileMenuItems-setIcon(QIcon(:/resources/file.png));fileMenuItems-setTitle(u8文件);fileMenuItems-setStyleSheet(QString::fromStdString(menuItemQss));QListQAction* acList; // 用于存放子级菜单// 为 文件 菜单项添加 action 构成子菜单QAction *openFileAc new QAction(QIcon(:/resources/file.png), u8打开文件, this);//openFileAc-setShortcuts(QKeySequence::Print); // 设置快捷键系统内置枚举量openFileAc-setShortcut(QKeySequence(Ctrl8)); // 随意指定快捷键QAction *openFloderAc new QAction(u8打开文件夹, this);QAction *openUrlAc new QAction(u8打开url, this);// QMenu 添加 QMenu 构成多级菜单acList openFileAc openFloderAc openUrlAc;fileMenuItems-addActions(acList);// 0、主菜单父菜单包括 文件 播放 工具 设置 退出QMenu *pMenu new QMenu;pMenu-addMenu(fileMenuItems);// 2、创建 播放 工具 菜单项无子级菜单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(); // 添加分割线// 3、创建 设置 菜单项QMenu *setMenuItems new QMenu;setMenuItems-setTitle(u8设置);setMenuItems-setIcon(QIcon(:/resources/set.png));QListQAction* setList;// 为 设置 菜单项添加 action 构成子菜单QAction *sysSetAc new QAction(u8系统设置, this);QAction *playSetAc new QAction(u8播放设置, this);QAction *zimuSetAc new QAction(u8字幕设置, this);setList sysSetAc playSetAc zimuSetAc;setMenuItems-addActions(setList);setMenuItems-setStyleSheet(QString::fromStdString(menuItemQss));pMenu-addMenu(setMenuItems);pMenu-addSeparator(); // 添加分割线// 4、创建 退出 菜单项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请选择视频文件,D:/,视频(*.mp4 *.flv);;);if (fileName.isEmpty()) {return;}});ui-pushButton-setText(u8QW影音);ui-pushButton-setFixedSize(100, 32);ui-pushButton-setStyleSheet(QString::fromStdString(button_qss));pMenu-setStyleSheet(QString::fromStdString(menuQss));
}Widget::~Widget() {delete ui;
}qss.h
#ifndef QSS_H
#define QSS_H#include stringusing namespace std;string button_qss R(QPushButton {font:18px Microsoft YaHei;color:rgb(255,255,255);border:none}QPushButton::menu-indicator:open {image:url(:/resources/down_arrow.svg);subcontrol-position:right center;subcontrol-origin:padding;border:none;}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底部颜色*/}/*选择项设置*/QMenu::item:selected {background-color:rgb(54, 54, 54);}
);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底部颜色*/}/*选择项设置*/QMenu::item:selected {background-color:rgb(54, 54, 54);}
);#endif // QSS_H5.2 鼠标悬浮弹出对话框 5.2.1 主窗口
widget.cpp
#include widget.h
#include ui_widget.h
#include QHBoxLayout
#include CVolumeButton.hWidget::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;
}5.2.2 音量按钮
CVolumeButton.h
/*
音量调节按钮
功能1. 鼠标悬浮到音量时显示 slider dialog2. 点击时 mute
注意问题重写按钮类样式表无效
*/
#pragma once#include QPushButton
#include CVolumeSliderDialog.hclass 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 QThreadusing 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); // QStylePainter 用于样式化绘制 widgetQStyleOptionButton option; // 用于存储按钮的样式选项initStyleOption(option); // 初始化 option 对象以便正确设置按钮的样式选项p.drawControl(QStyle::CE_PushButton, option); // 绘制一个样式化的按钮
}// 在鼠标进入 CVolumeButton 对象时显示一个音量滑动条其位置在 CVolumeButton 的正上方
void CVolumeButton::enterEvent(QEvent* event) {if (!m_pVolumeSliderDlg)m_pVolumeSliderDlg new CVolumeSliderDialog(this);// 将 widget 坐标 pos 转换为全局屏幕坐标QPoint p1 this-mapToGlobal(QPoint(0, 0)); // 声音按钮左上角相对于桌面的绝对位置QRect rect1 this-rect();QRect rect2 m_pVolumeSliderDlg-rect(); // rect 包含标题栏去掉标题栏后 height 不变int x p1.x() (rect1.width() - rect2.width()) / 2;int y p1.y() - rect2.height() - 5;m_pVolumeSliderDlg-move(x, y); // move 是相对于桌面原点的位置m_pVolumeSliderDlg-show();m_timerId startTimer(250);connect(m_pVolumeSliderDlg, CVolumeSliderDialog::sig_SliderValueChanged, [](int value) {emit sig_VolumeValue(value);});
}// 鼠标移出控件或窗口
//void CVolumeButton::leaveEvent(QEvent* event)
//{
// 根据鼠标的位置判断音量调节窗口是否消失
// //QPoint p1 QCursor::pos(); // 绝对位置
//
// //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)); // 声音按钮左上角相对于桌面的绝对位置
//
// // // 已知音量框宽 40 按钮宽 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();
// // }
// //}
//}// 鼠标按下事件用于处理音量按钮的交互行为
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 { // 如果静音状态为假将滑动条的值设置为 50if (m_pVolumeSliderDlg)m_pVolumeSliderDlg-setSliderValue(50);}}
}/*** brief 用定时器模拟 leaveEvent* 直接在 leaveEvent 里让 m_pVolumeSliderDlg 消失效果不太好* 用鼠标移动事件也不太好定时器是比较好的做法*/
void CVolumeButton::timerEvent(QTimerEvent* event) {if ((m_pVolumeSliderDlg ! nullptr) (m_pVolumeSliderDlg-isVisible())) {QPoint p1 QCursor::pos(); // 鼠标绝对位置if (m_pVolumeSliderDlg) {QRect rect1 this-rect(); // 按钮矩形QRect rect2 m_pVolumeSliderDlg-rect();QRect rect3 m_pVolumeSliderDlg-geometry();QPoint p2 this-mapToGlobal(QPoint(0, 0)); // 声音按钮左上角相对于桌面的绝对位置// 已知音量框宽 40 按钮宽 30// 左上宽高QRect area(rect3.left(), rect3.top(), rect2.width(), p2.y() rect1.height() - rect3.top());if (!area.contains(p1)) {m_pVolumeSliderDlg-hide();}}} else {killTimer(m_timerId);}
}5.2.3 音量调节滑动条
CVolumeSliderDialog.h
#ifndef CVOLUMESLIDERDIALOG_H
#define CVOLUMESLIDERDIALOG_H#include QDialog
#include QSliderclass 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;
};#endifCVolumeSliderDialog.cpp
#include CVolumeSliderDialog.h
#include QVBoxLayout
#include QEvent
#include windows.h// 注意由于此类使用了 windows 的函数 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 : 悬浮是显示离开时消失// 0.5 表示透明度0 表示全透明、1 表示不透明也可以使用百分比表示setStyleSheet(QDialog{background-color: rgba(54, 54, 54, 0.5);});connect(m_pSlider, QSlider::valueChanged, [](int value) {emit sig_SliderValueChanged(value);});
}CVolumeSliderDialog::~CVolumeSliderDialog() {}// 参考 qt 文档bool QWidget::event(QEvent *event)
// 设置 popup 后dialog 有窗口阴影需要去除就重写 event 函数
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 系统函数}}return QWidget::event(event);
}6. QCheckBox 实现打开、关闭状态按钮 widget.cpp
#include widget.h
#include ui_widget.h
#include QDebugWidget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {ui-setupUi(this);ui-checkBox-setFixedSize(128, 64);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);//ui-checkBox-setTristate(true);connect(ui-checkBox, QCheckBox::stateChanged, [](int state){qDebug() state;});
}Widget::~Widget() {delete ui;
}7. QComboBox 样式表 widget.cpp
#include widget.h
#include ui_widget.h
#include string
#include QListViewusing namespace std;Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui-setupUi(this);QStringList strList;strList item1 item2 item3 item4 item1 item2 item3 item4 item1 item2 item3 item4 item1 item2 item3 item4;ui-comboBox-addItems(strList);// 将 QComboBox 的下拉列表视图设置为 QListView并将此视图限定在当前的 QWidget 类的范围内显示ui-comboBox-setView(new QListView(this));ui-comboBox-setEditable(true);//ui-comboBox-insertSeparator(10);//ui-comboBox-insertSeparator(12);
}Widget::~Widget() {delete ui;
}qss
/* 未下拉时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);
}/* 下拉后整个下拉窗体样式 */
QComboBox QAbstractItemView {outline: 0px solid gray; /* 选定项的虚框 */border: 1px solid yellow; /* 整个下拉窗体的边框 */color: rgb(250,251,252);background-color: rgb(70,80,90); /* 整个下拉窗体的背景色 */selection-background-color: lightgreen; /* 整个下拉窗体被选中项的背景色 */
}/* 下拉后整个下拉窗体每项的样式 */
/* 项的高度设置 ComboBox-setView(new QListView(this)); 后该项才起作用 */
QComboBox QAbstractItemView::item {height: 50px;
}/* 下拉后整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover {color: rgb(90,100,105);background-color: lightgreen; /* 整个下拉窗体越过每项的背景色 */
}/* 下拉后整个下拉窗体被选择的每项的样式 */
QComboBox QAbstractItemView::item:selected {color: rgb(12, 23, 34);background-color: lightgreen;
}/* QComboBox中的垂直滚动条 */
QComboBox QAbstractScrollArea QScrollBar:vertical {width: 13px;background-color: #d0d2d4; /* 空白区域的背景色*/
}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 */
}/* 设置为可编辑setEditable(true)editable时编辑区域的样式 */
QComboBox:editable {background: green;
}/* 设置为非编辑setEditable(false)!editable时整个QComboBox的样式 */
QComboBox:!editable {background: rgb(54,54,54);
}/* 设置为可编辑editable时点击整个QComboBox的样式 */
QComboBox:editable:on {background: rgb(54,54,54);
}/* 设置为非编辑!editable时点击整个QComboBox的样式 */
QComboBox:!editable:on {background: rgb(54,54,54);
}/* 设置为可编辑editable时下拉框的样式 */
QComboBox::drop-down:editable {background: rgb(54,54,54);
}/* 设置为可编辑editable时点击下拉框的样式 */
QComboBox::drop-down:editable:on {background: rgb(54,54,54);
}/* 设置为非编辑!editable时下拉框的样式 */
QComboBox::drop-down:!editable {background: rgb(54,54,54);
}/* 设置为非编辑!editable时点击下拉框的样式 */
QComboBox::drop-down:!editable:on {background: rgb(54,54,54);image: url(:/resources/up.png); /* 显示上拉箭头 */
}/* 下拉框样式 */
QComboBox::drop-down {subcontrol-origin: padding; /* 子控件在父元素中的原点矩形。如果未指定此属性则默认为padding。 */subcontrol-position: top right; /* 下拉框的位置右上 */width: 32px; /* 下拉框的宽度 */border-left-width: 1px; /* 下拉框的左边界线宽度 */border-left-color: darkgray; /* 下拉框的左边界线颜色 */border-left-style: solid; /* 下拉框的左边界线为实线 */border-top-right-radius: 3px; /* 下拉框的右上边界线的圆角半径应和整个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; /* 上内边距、右内边距、下内边距、左内边距 */ image: url(:/resources/down.png);
} /* 点击下拉箭头 */
QComboBox::down-arrow:on { image: url(:/resources/up.png); /* 显示上拉箭头 */
}8. QProgressBar 用法及样式表 widget.h
#ifndef WIDGET_H
#define WIDGET_H#include QWidget
#include QTimerQT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget();private slots:void on_btnStart_clicked();void on_btnStop_clicked();private:Ui::Widget *ui;QTimer *m_pTimer nullptr;
};
#endif // WIDGET_Hwidget.cpp
#include widget.h
#include ui_widget.hWidget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {ui-setupUi(this);m_pTimer new QTimer(this);ui-progressBar-setValue(0);ui-progressBar-setRange(0, 100);ui-progressBar-setFormat(%p%);// lambda 表达式用于每个定时器超时时更新 QProgressBar 组件的当前进度值其中的 step 变量用于存储当前进度值// 当定时器超时时step 的值会自增 1并将新的进度值设置到 QProgressBar 组件上connect(m_pTimer, QTimer::timeout, []{static int step 0;ui-progressBar-setValue(step);});ui-progressBar_2-setOrientation(Qt::Vertical);ui-progressBar_2-setFixedWidth(60);ui-progressBar_2-setFixedHeight(300);
}Widget::~Widget() {delete ui;
}void Widget::on_btnStart_clicked() {m_pTimer-start(50);
}void Widget::on_btnStop_clicked() {m_pTimer-stop();
}qss
QProgressBar {background:rgb(54,54,54);border:none; /*无边框*/border-radius:5px;text-align:center; /*文本的位置*/color: rgb(229, 229, 229); /*文本颜色*/
}QProgressBar::chunk {background-color:rgb(58, 154, 255);border-radius:4px;
}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:QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #00ff58,stop: 1 #034f1f);margin:1px;
}9. QSlider 用法及样式表 widget.cpp
#include widget.h
#include ui_widget.h
#include qss.hWidget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {ui-setupUi(this);ui-hSlider-setStyleSheet(QString::fromStdString(hslider_qss));
}Widget::~Widget() {delete ui;
}qss.h
#ifndef QSS_H
#define QSS_H#include stringusing namespace std;string hslider_qss R(QSlider {background-color: #FF0000;border-style: outset;border-radius: 1px;}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;}
);#endif // QSS_H10. qss 加载方式详解 方式一在 qt 设计器里写 方式二C 代码写 QString 或 R 字符串 方式三写到 qss 文件里读文件 放到程序外部暴露给用户加到 qrc 文件里编译到 exe 里 widget.cpp
#include widget.h
#include ui_widget.h
#include QTextStreamWidget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {ui-setupUi(this);QFile file(:/res/skin.qss);QString lineStr;if (file.open(QIODevice::ReadOnly | QIODevice::Text)) {QTextStream txtInput(file);while (!txtInput.atEnd()) {lineStr txtInput.readLine(); // 逐行读取 qss 代码}}file.close();this-setStyleSheet(lineStr);
}Widget::~Widget() {delete ui;
}skin.css
QWidget {background-color: rgb(54, 54, 54);border-top:2px;border-bottom:2px;border-left:2px;border-right:2px;
}QLineEdit {background-color: rgb(249, 249, 249); border: 1px solid black;border-radius:5;font:14px;
}QLabel {background-color: rgb(54, 54, 54); font:12px;color:white;
}QPushButton {color:rgb(251,251,251); font:12px, 微软雅黑;background-color:rgb(105, 105, 105);border-radius:4px;padding:2px;
}QPushButton:hover {color:#0000ff;background-color:rgb(210, 205, 205); /*改变背景色*/border-style:inset;/*改变边框风格*/padding-left:2px;padding-top:2px;
} QPushButton:flat { border:2px solid red;
} QPushButton:pressed {color:green;
} QPlainTextEdit {background-color: rgb(169, 169, 169); font:14px;color:white;
}11. 控件提升与自定义控件
控件提升相当于把控件变成另一个控件或者说称为自定义控件控件提升需要在 qt 设计器里操作案例按钮图片在上文字在下 widget.cpp
#include widget.h
#include ui_widget.hWidget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {ui-setupUi(this);ui-pushButton-setText();ui-pushButton-setFixedSize(64, 88);
}Widget::~Widget() {delete ui;
}cmybutton.h
#ifndef CMYBUTTON_H
#define CMYBUTTON_H#include QPushButton
#include QObject
#include QLabelclass CMyButton : public QPushButton {Q_OBJECTpublic:CMyButton(QWidget *parent nullptr);void set_Text(const QString text);private:QLabel *m_pIconLabel;QLabel *m_pTextLabel;
};#endif // CMYBUTTON_Hcmybutton.cpp
#include cmybutton.h
#include QVBoxLayoutCMyButton::CMyButton(QWidget *parent) : QPushButton(parent) {this-setFixedSize(64, 88);this-setText();m_pTextLabel new QLabel(this);m_pIconLabel-setFixedSize(64, 64);m_pIconLabel-setPixmap(QPixmap(:/resources/save.png));m_pTextLabel new QLabel(this);m_pTextLabel-setFixedSize(64, 24);m_pTextLabel-setText(u8保存);QVBoxLayout* pVlay new QVBoxLayout(this);pVlay-addWidget(m_pIconLabel);//pVlay-addSpacing(5);pVlay-addWidget(m_pTextLabel);pVlay-setContentsMargins(0, 0, 0, 0);
}void CMyButton::set_Text(const QString text) {m_pTextLabel-setText(text);
}12. Qt 鼠标、控件、窗口位置详解 桌面原点在电脑桌面左上角上图红点处应用程序原点在应用程序左上角坐标系一般都是 x 向左为正y 向下为正绝对位置相对于电脑桌面左上角的位置相对位置相对于应用程序左上角的位置
12.1 鼠标的位置 获取鼠标相对于桌面左上角的绝对位置 QCursor::pos()获取 mousePressEvent 的参数 event 的位置 event-pos() // 鼠标相对于应用程序的位置相对位置
event-globalPos() // 鼠标相对于桌面原点的位置绝对位置12.2 控件的位置
相对位置 按钮相对于应用窗口原点的位置 QPoint p ui-pushButton-pos();绝对位置 按钮相对于桌面原点的位置 QPoint p ui-pushButton-mapToGlobal(QPoint(0, 0));控件大小QRect rect ui-pushButton-rect();12.3 应用程序窗口的位置
相对位置QRect rect m_pDlg-pos();绝对位置 对话框相对于桌面原点的 rect QRect rect m_pDlg-geometry();应用窗口大小QRect rect m_pDlg-rect();12.4 案例 widget.cpp
#ifndef WIDGET_H
#define WIDGET_H#include QWidgetQT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget();private slots:void on_pushButton_clicked();private:void mousePressEvent(QMouseEvent *event) override;private:Ui::Widget *ui;
};
#endif // WIDGET_Hwidget.cpp
#include widget.h
#include ui_widget.h
#include QDebug
#include QMouseEvent
#include tempdialog.h
#include memoryusing namespace std;Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {ui-setupUi(this);ui-pushButton-setFixedSize(100,200);
}Widget::~Widget() {delete ui;
}void Widget::mousePressEvent(QMouseEvent *event) {qDebug() QCursor::pos(); // 鼠标绝对位置qDebug() event-pos() event-pos();qDebug() event-globalPos() event-globalPos();
}void Widget::on_pushButton_clicked() {qDebug() u8控件相对位置 ui-pushButton-pos();QPoint jPos ui-pushButton-mapToGlobal(QPoint(0,0));qDebug() u8控件绝对位置 jPos;QRect rect ui-pushButton-rect();qDebug() rect;qDebug() u8窗口绝对位置 this-geometry(); // 绝对位置qDebug() u8窗口矩形 this-rect();//TempDialog *dlg new TempDialog(this);std::unique_ptrTempDialog dlg(new TempDialog(this));dlg-move(jPos.x() - dlg-width(), jPos.y());dlg-exec();
}tempdialog.h
#ifndef TEMPDIALOG_H
#define TEMPDIALOG_H#include QDialognamespace Ui {class TempDialog;
}class TempDialog : public QDialog {Q_OBJECTpublic:explicit TempDialog(QWidget *parent nullptr);~TempDialog();private:Ui::TempDialog *ui;
};#endif // TEMPDIALOG_Htempdialog.cpp
#include tempdialog.h
#include ui_tempdialog.h
#include QDebugTempDialog::TempDialog(QWidget *parent) : QDialog(parent), ui(new Ui::TempDialog) {ui-setupUi(this);
}TempDialog::~TempDialog() {delete ui;qDebug() 123456;
}13. 自定义 QLineEdit 实现搜索编辑框 13.1 主窗口
widget.cpp
#include widget.h
#include ui_widget.h
#include QVBoxLayout
#include csearchlineedit.h
#include QDebugWidget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {ui-setupUi(this);this-setStyleSheet(background-color:#1A1E21);// 创建搜索栏实例化对象 pEditCSearchLineEdit* pEdit new CSearchLineEdit(this);QVBoxLayout* pVLay new QVBoxLayout(this);pVLay-addWidget(pEdit);// 链接 搜索栏 搜索信号与 主窗口 控制台打印槽函数connect(pEdit, CSearchLineEdit::sig_Search, this, Widget::onSearch);
}Widget::~Widget() {delete ui;
}// 在控制台打印搜索的内容
void Widget::onSearch(const QString text) {qDebug() u8搜索的内容是 text;
}13.2 搜索输入栏
csearchlineedit.h
#ifndef CSEARCHLINEEDIT_H
#define CSEARCHLINEEDIT_H#include QLineEdit
#include QObject
#include csearchbutton.hclass CSearchLineEdit : public QLineEdit {Q_OBJECTpublic:CSearchLineEdit(QWidget *parent nullptr);signals:void sig_Search(const QString text);private:CSearchButton* m_pBtn nullptr;
};#endif // CSEARCHLINEEDIT_Hcsearchlineedit.cpp
#include csearchlineedit.h
#include QHBoxLayout
#include stringusing namespace std;CSearchLineEdit::CSearchLineEdit(QWidget *parent) : QLineEdit(parent) {// 将当前的窗口部件设置为使用样式背景this-setAttribute(Qt::WA_StyledBackground);string qss R(QLineEdit{background-color:#33373E; /* 背景颜色 */border: 1px solid #33373E; /* 边框宽度为1px颜色为#A0A0A0 */border-radius: 20px; /* 边框圆角 */padding-left: 10px; /* 文本距离左边界有5px */color: #FFFFFF; /* 文本颜色 */selection-background-color: #A0A0A0; /* 选中文本的背景颜色 */selection-color: #F2F2F2; /* 选中文本的颜色 */font-family: \Microsoft YaHei\; /* 文本字体族 */font-size:18px; /* 文本字体大小 */});this-setStyleSheet(QString::fromStdString(qss));this-setPlaceholderText(u8请输入搜索内容); // 只要行编辑为空行编辑就会显示一个变灰显示占位符文本this-setFixedHeight(40);this-setMinimumWidth(400);// 创建搜索按钮实例化对象 m_pBtnm_pBtn new CSearchButton(this);QHBoxLayout* pHlay new QHBoxLayout(this);pHlay-addStretch(); // 添加弹簧挤压占位pHlay-addWidget(m_pBtn);// 设置控件周围边框大小pHlay-setContentsMargins(0, 0, 0, 0);// 设置文本周围的边距this-setTextMargins(10, 0, 130 5, 0);// 链接 搜索按钮点击信号 与 搜索栏 搜索信号connect(m_pBtn, CSearchButton::clicked, []{emit sig_Search(this-text());});
}13.3 搜索按钮
csearchbutton.h
#ifndef CSEARCHBUTTON_H
#define CSEARCHBUTTON_H#include QPushButton
#include QObjectclass CSearchButton : public QPushButton {Q_OBJECTpublic:CSearchButton(QWidget *parent nullptr);private:void normalStyle(); // 按钮控件默认样式protected:// 鼠标进入事件void enterEvent(QEvent *event) override;// 鼠标离开事件void leaveEvent(QEvent *event) override;
};#endif // CSEARCHBUTTON_Hcsearchbutton.cpp
#include csearchbutton.h
#include stringusing namespace std;CSearchButton::CSearchButton(QWidget *parent) : QPushButton(parent) {this-setAttribute(Qt::WA_StyledBackground);this-setFixedHeight(40);normalStyle(); // 设置默认样式
}// 鼠标进入按钮控件时触发的事件
void CSearchButton::enterEvent(QEvent *event) {string qss R(QPushButton{background-color:#148AFF;background-image: url(:/resources/search.png);background-repeat: no-repeat;background-position:left;background-origin:content;padding-left:15px; /*图片相对于左边的偏移*/text-align:right; /*文本的对齐方式*/padding-right:15px; /*文本相对于右边的偏移*/border-radius:20px;color:#FFFFFF;font-family: \Microsoft YaHei\;font-size: 20px;});this-setStyleSheet(QString::fromStdString(qss));this-setFixedWidth(130);this-setText(u8搜全网);
}// 鼠标离开按钮控件时触发的事件
void CSearchButton::leaveEvent(QEvent *event) {normalStyle();
}// 鼠标离开按钮控件时的 默认样式
void CSearchButton::normalStyle() {string qss R(QPushButton{background-color:#148AFF;background-image: url(:/resources/search.png);background-repeat: no-repeat;background-position: center;border-radius:20px;});this-setStyleSheet(QString::fromStdString(qss));this-setFixedWidth(60);this-setText(u8);
}14. 自定义 QTabWidget 实现 tab 在左文本水平 14.1 主窗口
widget.cpp
#include widget.h
#include ui_widget.h
#include QHBoxLayout
#include tabwidget.hWidget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {ui-setupUi(this);// 创建 标签窗口 实例对象TabWidget *tabWidget new TabWidget(this);// 分别插入三个标签页QWidget* w1 new QWidget;w1-setStyleSheet(background-color:rgb(54,54,54));// int insertTab(int index, QWidget *widget, const QString );tabWidget-insertTab(0, w1, u8参数设置);QWidget* w2 new QWidget;w2-setStyleSheet(background-color:rgb(154,54,54));tabWidget-insertTab(1, w2, u8设备管理);QWidget* w3 new QWidget;w3-setStyleSheet(background-color:rgb(154,54,154));tabWidget-insertTab(2, w3, u8设备管理);QHBoxLayout* hLay new QHBoxLayout(this);hLay-addWidget(tabWidget);
}Widget::~Widget() {delete ui;
}14.2 标签窗口
tabwidget.cpp
#include tabwidget.h
#include stringusing namespace std;TabWidget::TabWidget(QWidget *parent): QTabWidget(parent) {// 创建一个新的选项卡栏对象并将其设置为当前的选项卡栏this-setTabBar(new TabBar);// 将选项卡位置设置为西边左侧this-setTabPosition(QTabWidget::West);// 注意在 QTabBar::tab 里不能设置 tab 的大小否则自定义的 TabBar 无效string qss R(QTabWidget::pane {border-top:1px solid #EAEAEA;position:absolute;top:-0.1px;}QTabBar::tab {font-size:18px;font-family:Microsoft YaHei;font-weight:400;background:#FFFFFF;border:2px solid #FFFFFF;border-bottom-color:#FFFFFF;border-top-left-radius:4px;border-top-right-radius:4px;padding:2px;}QTabBar::tab:selected {color:#333333;border-color:#FFFFFF;border-bottom-color:#4BA4F2;}QTabBar::tab:!selected {color:#B2B2B2;border-color:#FFFFFF;border-bottom-color:#FFFFFF;});this-setStyleSheet(QString::fromStdString(qss));
}14.3 标签栏
tabbar.h
#ifndef TABBAR_H
#define TABBAR_H#include QTabBarclass TabBar : public QTabBar {
public:TabBar(QWidget* parent nullptr);QSize tabSizeHint(int index) const override;protected:void paintEvent(QPaintEvent *event) override;
};#endif // TABBAR_Htabbar.cpp
#include tabbar.h
#include QStylePainter
#include QStyleOptionTabTabBar::TabBar(QWidget* parent) : QTabBar(parent) {}// 获取原始选项卡的大小建议交换宽度和高度再返回修改后的大小建议表达了对选项卡大小的自定义设置
QSize TabBar::tabSizeHint(int index) const {QSize s QTabBar::tabSizeHint(index);s.transpose();// 设置每个 tabBar 中 item 的大小// 注意在 qss QTabBar::tab 里不能设置 tab 的大小否则自定义的 TabBar 无效s.rwidth() 90;s.rheight() 44;return s;
}// 绘制标签栏将标签栏的形状绘制为横向的条形标签内容垂直显示
void TabBar::paintEvent(QPaintEvent *event) {// QStylePainter 类用于 widget 窗口内部绘制 QStyle 元素QStylePainter painter(this);// QStyleOptionTab 类用于描述 标签栏 的参数QStyleOptionTab opt;for (int i 0; i count(); i) {initStyleOption(opt, i); // i 为标签栏索引painter.drawControl(QStyle::CE_TabBarTabShape, opt); // 绘制标签栏的形状painter.save(); // 保存当前绘图状态// 根据 opt.rect 的大小创建一个矩形 r并将其移动到 opt.rect 的中心位置QSize s opt.rect.size();s.transpose();QRect r(QPoint(), s);r.moveCenter(opt.rect.center());opt.rect r;// 将绘图原点移到当前标签的中心位置然后旋转 90 度再将绘图原点移回初始位置QPoint c tabRect(i).center();painter.translate(c);painter.rotate(90);painter.translate(-c);painter.drawControl(QStyle::CE_TabBarTabLabel, opt); // 绘制标签栏的标签painter.restore(); // 恢复之前保存的绘图状态}
}
