百度360必应搜狗淘宝本站头条
mqtt服务器xftp6vscode使用技巧mybatiscollectionkeyerror
当前位置：网站首页 > 热门文章 > 正文

Qt样式表:常用控件qss

bigegpt 2024-09-18 07:51 6 浏览

目录

  • 一、效果图
  • 二、实例
  • 三、qss文件

一、效果图

先看下程序运行效果图：

二、实例

Widget.h：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QLabel>
#include <QPushButton>
#include <QLineEdit>
#include <QCheckBox>
#include <QSlider>
#include <QProgressBar>
#include <QScrollBar>
#include <QApplication>
#include <QDebug>

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    QLabel *m_pLabTest;
    QPushButton *m_pBtnTest;
    QLineEdit *m_pLineEdit;

    QCheckBox *m_pCheckBox;
    QProgressBar *m_pProBar;
    QSlider *m_pSlider;
    QScrollBar *m_pScrollBar;
};
#endif // WIDGET_H

Widget.cpp：

#include "Widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    // 初始化界面
    this->setFixedSize(800, 600);
    this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);

    // 初始化标签
    m_pLabTest = new QLabel;
    m_pLabTest->setText("测试文本");

    // 初始化按钮
    m_pBtnTest = new QPushButton;
    m_pBtnTest->setObjectName("Common_BtnBlue");
    m_pBtnTest->setFixedSize(60, 32);
    m_pBtnTest->setText("按钮");

    // 初始化编辑框
    m_pLineEdit = new QLineEdit;
    m_pLineEdit->setFixedSize(150, 30);
    m_pLineEdit->setText("这是编辑框");

    // 初始化勾选框
    m_pCheckBox = new QCheckBox(this);

    // 初始化滑动条
    m_pSlider = new QSlider;
    m_pSlider->setOrientation(Qt::Horizontal);  // 水平方向
    m_pSlider->setMinimum(0);  // 最小值
    m_pSlider->setMaximum(100);  // 最大值
    m_pSlider->setSingleStep(10);  // 步长
    m_pSlider->setFixedWidth(500); // 设置固定宽度，高度由样式表设置
    m_pSlider->setValue(50);

    // 初始化滚动条
    m_pScrollBar = new QScrollBar;
    m_pScrollBar->setOrientation(Qt::Vertical);  // 垂直方向
    m_pScrollBar->setMinimum(0);  // 最小值
    m_pScrollBar->setMaximum(100);  // 最大值
    m_pScrollBar->setSingleStep(10);  // 步长
    m_pScrollBar->setFixedHeight(500); // 设置固定高度，宽度由样式表设置

    // 初始化进度条
    m_pProBar = new QProgressBar;
    m_pProBar->setRange(0, 100); // 设置进度条最小值和最大值(取值范围)
    m_pProBar->setValue(40);  // 设置当前的运行值
    m_pProBar->setOrientation(Qt::Horizontal);  // 水平方向
    m_pProBar->setTextVisible(false); // 隐藏进度条文本
    m_pProBar->setFixedSize(500, 16);   // 进度条固定大小
    m_pProBar->setInvertedAppearance(false); // true:反方向  false:正方向

    // 标签、按钮布局
    QHBoxLayout *pHLayoutLabel = new QHBoxLayout;
    pHLayoutLabel->addStretch();
    pHLayoutLabel->addWidget(m_pLabTest);
    pHLayoutLabel->addSpacing(24);
    pHLayoutLabel->addWidget(m_pBtnTest);
    pHLayoutLabel->addSpacing(24);
    pHLayoutLabel->addWidget(m_pLineEdit);
    pHLayoutLabel->addSpacing(24);
    pHLayoutLabel->addWidget(m_pCheckBox);
    pHLayoutLabel->addStretch();
    pHLayoutLabel->setSpacing(0);
    // 左侧垂直布局
    QVBoxLayout *pVLayoutLeft = new QVBoxLayout;
    pVLayoutLeft->addSpacing(64);
    pVLayoutLeft->addLayout(pHLayoutLabel);
    pVLayoutLeft->addSpacing(64);
    pVLayoutLeft->addWidget(m_pSlider, 0, Qt::AlignHCenter);
    pVLayoutLeft->addSpacing(64);
    pVLayoutLeft->addWidget(m_pProBar, 0, Qt::AlignHCenter);
    pVLayoutLeft->addStretch();
    pVLayoutLeft->setSpacing(0);
    pVLayoutLeft->setMargin(0);
    // 主布局
    QHBoxLayout *pLayoutMain = new QHBoxLayout(this);
    pLayoutMain->addStretch();
    pLayoutMain->addLayout(pVLayoutLeft);
    pLayoutMain->addStretch();
    pLayoutMain->addWidget(m_pScrollBar);
    pLayoutMain->addStretch();
    pLayoutMain->setSpacing(0);
    pLayoutMain->setMargin(0);
}

Widget::~Widget()
{
}

【粉丝福利】Qt开发学习资料包、Qt面试题文档、项目视频、学习路线，包括（Qt C++基础，数据库编程，Qt项目实战、Qt框架、QML、Opencv、qt线程等等）有需要的可以进企鹅裙937552610领取哦~

main.cpp：

#include "Widget.h"

#include <QApplication>
#include <QFile>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 1、应用全局加载样式表
    QFile qss(":/official.qss");
    if (qss.open(QFile::ReadOnly))
    {
        qApp->setStyleSheet(qss.readAll());
        qss.close();
    }
    else{
        qDebug("Open qss failed");
    }

    Widget w;
    w.show();

    return a.exec();
}

三、qss文件

/*** 标签 ***/
QLabel{
    font: 14px;
    color: rgba(0,0,0,0.6);
}

/* 通用的蓝色按钮 */
QPushButton#Common_BtnBlue {
    background: rgba(0,147,221,0.7);
    color: white;
    font-size: 12px;
    border: none;
}
QPushButton:hover#Common_BtnBlue {
    background: #0093DD;
}
QPushButton:pressed#Common_BtnBlue {
    background: #0086C6;
}

/* 单行编辑框 */
QLineEdit {
    background: rgba(204,204,204,0.3);
    color: #bbbbbb;
    font-size: 15px;
    padding-left: 2px;
    border: none;
}

/* 勾选框 */
QCheckBox {
    border: none;
}
QCheckBox::indicator {
    width: 24px;
    height: 24px;
}
/* 未选中状态的勾选框 */
QCheckBox::indicator:enabled:unchecked {
    background:url(:/checkBox_unchecked.png) no-repeat center;
}
/* 选中状态的选择框 */
QCheckBox::indicator:enabled:checked {
    background:url(:/checkBox_checked.png) no-repeat center;
}

/* 水平滑动条整体 */
QSlider::groove:horizontal {
    border: 0px solid #bbb;
    height: 28px; /* 先定滑动条完整高度为28px，这个值最先设置，后面的值都由这个值来定 */
}
/* 滑动过的槽 */
QSlider::sub-page:horizontal {
    background: rgb(90,49,255); /* 槽颜色 */
    border-radius: 4px; /* 外环区域倒圆角度（槽实际高度8px的一半） */
    margin-top: 10px; /* 上遮住区域高度，如果想设置槽实际高度为8px，则margin-top = (height - sub-page-height)/2 = (28 - 8)/2 = 10px*/
    margin-bottom: 10px; /* 下遮住区域高度 */
    /* width在这里无效，不写即可 */
}
/* 未滑动过的槽 */
QSlider::add-page:horizontal {
    background: rgb(255,255,255); /* 槽颜色 */
    border: 0px solid #777; /* 外环大小0px就是不显示，默认也是0 */
    border-radius: 4px; /* 外环区域倒圆角度 */
    margin-top: 10px; /* 上遮住区域高度 */
    margin-bottom: 10px; /* 下遮住区域高度 */
}
/* 滑块 */
QSlider::handle:horizontal {
    background: rgb(193,204,208); /* 滑块颜色 */
    width: 20px; /* 滑块的宽度，只要保证 width + margin-top + margin-bottom = height即可 */
    border-radius: 10px; /* 滑块外环倒圆角度，滑块的一半宽度 */
    margin-top: 4px; /* 上遮住区域高度 */
    margin-bottom: 4px; /* 下遮住区域高度 */
}
/* 鼠标触及滑块 */
QSlider::handle:horizontal:hover {
    background: rgb(193,204,208); /* 滑块颜色 */
    width: 22px; /* 滑块的宽度 */
    border-radius: 11px; /* 滑块外环倒圆角度 */
    margin-top: 3px; /* 上遮住区域高度 */
    margin-bottom: 3px; /* 下遮住区域高度 */
}

/* 垂直滚动条整体 */
QScrollBar:vertical {
    background: #FFFFFF;  /* 背景色 */
    width: 8px; /* 设置滚动条的宽度 */
    padding-top: 0px;  /* 上预留位置（放置向上箭头）*/
    padding-bottom: 0px;  /* 下预留位置（放置向下箭头）*/
    padding-left: 0px;  /* 左预留位置 */
    padding-right: 0px;  /* 右预留位置 */
    border-radius: 4px;
    margin: 0px 0px 0px 0px;
}
/* 鼠标触及滚动条 */
QScrollBar::vertical:hover{
    background: #FFFFFF;
}
/* 滑块 */
QScrollBar::handle:vertical {
    background: #dbdbdb;  /* 滑块颜色 */
    border-radius: 4px;  /* 边角圆润 */
    min-height: 30px;  /* 滑块最小高度 */
    margin-left: 0px; /* 滑块与滑轨左边的距离 */
    margin-right: 0px; /* 滑块与滑轨右边的距离 */
}
/* 鼠标触及滑块 */
QScrollBar::handle:vertical:hover{
    background: #d0d0d0;
}
/* 向下箭头 */
QScrollBar::add-line:vertical {
    border: 0px solid grey;
    background: rgba(204,204,204,0.3);
    height: 0px; /* 隐藏 */
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
/* 向上箭头 */
QScrollBar::sub-line:vertical {
    border: 0px solid grey;
    background: rgba(204,204,204,0.3);
    height: 0px; /* 隐藏 */
    subcontrol-position: top;
    subcontrol-origin: margin;
}
/* 当鼠标放到下箭头上的时候 */
QScrollBar::add-line:vertical:hover{
    height: 9px;
    width: 8px;
    /*border-image: url(:/images/downArrow.png);*/
    subcontrol-position: bottom;
}
/* 当鼠标放到下箭头上的时候 */
QScrollBar::sub-line:vertical:hover{
    height: 9px;
    width: 8px;
    /*border-image: url(:/images/upArrow.png);*/
    subcontrol-position: top;
}
/* 当滚动条滚动的时候，上面的部分和下面的部分 */
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
    border-radius: 4px;
}

/* 进度条 */
QProgressBar{
    background: #FFFFFF;
    border-radius: 8px;
}
QProgressBar::chunk
{
    background: qlineargradient(spread:pad,x1:0,y1:0,x2:1,y2:0,stop:0 #01FAFF,stop:1 #26B4FF);
    border-radius: 8px;
}

/* 矩阵列表TableView-整体样式 */
QTableView {
    color: #bbbbbb;
    font-size: 14px;
    background: white;
    border: none;
}
QTableView::item {
    max-height: 30px;
}
QTableView::item:selected{
    color: white;
    background: rgba(0,147,221,0.5);
    max-height: 30px;
}

/* 矩阵TableView-表头 */
QHeaderView {
    color: #bbbbbb;
    font: 14px;
    background-color: white;
}
QHeaderView::section {
    color: #bbbbbb;
    font-family: "Microsoft YaHei";
    font: normal 14px;
    background-color: transparent;
    border: 5px solid transparent; /* 使用border作为内边距的一半，可以取消点击效果*/
    padding-left: 10px;
}

/* QTableView 左上角样式 */
QTableView QTableCornerButton::section {
    color: white;
    font-family: "Microsoft YaHei";
    font: normal 14px;
    background-color: transparent;
    border: -7px solid transparent;
    border-radius:0px;
    padding:12px 0px 0px 20px;
}

相关推荐

方差分析简介（方差分析通俗理解）

介绍方差分析（ANOVA，AnalysisofVariance）是一种广泛使用的统计方法，用于比较两个或多个组之间的均值。单因素方差分析是方差分析的一种变体，旨在检测三个或更多分类组的均值是否存在...

正如404页面所预示，猴子正成为断网元凶--吧嗒吧嗒真好吃

吧嗒吧嗒，绘图：MakiNaro你可以通过加热、冰冻、水淹、模塑、甚至压溃压力来使网络光缆硬化。但用猴子显然是不行的。光缆那新挤压成型的塑料外皮太尼玛诱人了，无法阻挡一场试吃盛宴的举行。印度政府正...

Python数据可视化:箱线图多种库画法

概念箱线图通过数据的四分位数来展示数据的分布情况。例如：数据的中心位置，数据间的离散程度，是否有异常值等。把数据从小到大进行排列并等分成四份，第一分位数（Q1），第二分位数（Q2）和第三分位数（Q3）...

多组独立(完全随机设计)样本秩和检验的SPSS操作教程及结果解读

作者/风仕在上一期，我们已经讲完了两组独立样本秩和检验的SPSS操作教程及结果解读，这期开始讲多组独立样本秩和检验，我们主要从多组独立样本秩和检验介绍、两组独立样本秩和检验使用条件及案例的SPSS操作...

方差分析 in R语言 and Excel（方差分析r语言例题）

今天来写一篇实际中比较实用的分析方法，方差分析。通过方差分析，我们可以确定组别之间的差异是否超出了由于随机因素引起的差异范围。方差分析分为单因素方差分析和多因素方差分析，这一篇先介绍一下单因素方差分析...

可视化:前端数据可视化插件大盘点 图表/图谱/地图/关系图

前端数据可视化插件大盘点图表/图谱/地图/关系图全有在大数据时代，很多时候我们需要在网页中显示数据统计报表，从而能很直观地了解数据的走向，开发人员很多时候需要使用图表来表现一些数据。随着Web技术的...

matplotlib 必知的 15 个图（matplotlib各种图）

施工专题，我已完成20篇，施工系列几乎覆盖Python完整技术栈，目标只总结实践中最实用的东西，直击问题本质，快速帮助读者们入门和进阶：1我的施工计划2数字专题3字符串专题4列表专题5流程控制专题6编...

R ggplot2常用图表绘制指南（ggplot2绘制折线图）

ggplot2是R语言中强大的数据可视化包，基于“图形语法”（GrammarofGraphics），通过分层方式构建图表。以下是常用图表命令的详细指南，涵盖基本语法、常见图表类型及示例，适合...

Python数据可视化:从Pandas基础到Seaborn高级应用

数据可视化是数据分析中不可或缺的一环，它能帮助我们直观理解数据模式和趋势。本文将全面介绍Python中最常用的三种可视化方法。Pandas内置绘图功能Pandas基于Matplotlib提供了简洁的绘...

Python 数据可视化常用命令备忘录

本文提供了一个全面的Python数据可视化备忘单，适用于探索性数据分析(EDA)。该备忘单涵盖了单变量分析、双变量分析、多变量分析、时间序列分析、文本数据分析、可视化定制以及保存与显示等内容。所...

统计图的种类（统计图的种类及特点图片）

统计图是利用几何图形或具体事物的形象和地图等形式来表现社会经济现象数量特征和数量关系的图形。以下是几种常见的统计图类型及其适用场景：1.条形图（BarChart）条形图是用矩形条的高度或长度来表示...

实测，大模型谁更懂数据可视化?（数据可视化和可视化分析的主要模型）

大家好，我是Ai学习的老章看论文时，经常看到漂亮的图表，很多不知道是用什么工具绘制的，或者很想复刻类似图表。实测，大模型LaTeX公式识别，出乎预料前文，我用Kimi、Qwen-3-235B...

通过AI提示词让Deepseek快速生成各种类型的图表制作

在数据分析和可视化领域，图表是传达信息的重要工具。然而，传统图表制作往往需要专业的软件和一定的技术知识。本文将介绍如何通过AI提示词，利用Deepseek快速生成各种类型的图表，包括柱状图、折线图、饼...

数据可视化:解析箱线图(box plot)

箱线图/盒须图（boxplot）是数据分布的图形表示，由五个摘要组成：最小值、第一四分位数（25th百分位数）、中位数、第三四分位数（75th百分位数）和最大值。箱子代表四分位距（IQR）。IQR是...

[seaborn] seaborn学习笔记1-箱形图Boxplot

1箱形图Boxplot(代码下载)Boxplot可能是最常见的图形类型之一。它能够很好表示数据中的分布规律。箱型图方框的末尾显示了上下四分位数。极线显示最高和最低值，不包括异常值。seaborn中...

一周热门
最近发表
标签列表