若该文为原创文章，转载请注明原文出处

本文章博客地址：https://blog.csdn.net/qq21497936/article/details/79424146

长期持续带来更多项目与技术分享，咨询请加QQ:21497936、微信：yangsir198808

红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等）持续更新中...（点击传送门）

Qt开发专栏：qss样式表笔记大全（点击传送门）

上一篇：《qss样式表笔记大全(二)：可设置样式的窗口部件列表（上）（持续更新示例）》
下一篇：《qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）》

前话

Qt的qss样式详解与Demo

可设置样式的窗口部件列表

QLabel

窗口部件

样式表使用方式

QLabel

图片.png

支持盒模式。

不支持:hover状态。

从4.3后，设置一个QLable的样式表，会自动设置QFrame:frameStyle属性为值QFrame:StyledPanel。

注意：text-align对齐方式只对QPushButton有效

示例：QToolTip定制

QFrame, QLabel, QToolTip{
    border: 2px solid green; /* border: 宽度 线类型 颜色 */
    border-radius: 4px;
    padding: 2px; /* 边界都内部矩形的宽度 */
background-image: url(E:/1.jpg);
}

图片.png

QLineEdit

窗口部件

样式表使用方式

QLineEdit

图片.png

支持盒模式。

被选中的内容部分的前景色和背景需要通过属性selection-color和selection-background-color控制。

密码字符可以通过属性lineedit-password-character属性控制。

密码掩码可以通过属性lineeedit-password-mask-delay属性控制。

示例：QLineEdit定制（选中，密码输入，只读）

QLineEdit {
    border: 2px solid gray;
    border-radius: 10px;
    padding: 0 8px;
    background: yellow;
    selection-background-color: darkgray;
}

图片.png

/* 输入模式echoMode */
/* echoMode为 0(Normal) | 1(NoEcho) | 2(Password) | 3 (PasswordEchoOnEdit) */
QLineEdit[echoMode="2"] {
    lineedit-password-character: 42; /* ascii:* */
}

图片.png

运行起来可能变成了圆形，如下图：

图片.png

经过仔细研究，得出结论：在笔者win10记本上，echoMode枚举Password值为2，但在运行的时候，运行值却是0，代码和图如下：

QLineEdit[echoMode="0"] {
    lineedit-password-character: 42; /* ascii:* */
}

图片.png

/* 只读状态 */
QLineEdit:read-only {
    background: lightblue;
}

图片.png

示例：QLineEdit定制（没有焦点且有内容的时候，不显示边框；有焦点或者无焦点但是有内容的时候显示边框）

#include "LineEdit2.h"
#include <QDebug>
LineEdit2::LineEdit2(QWidget *parent)
    : QLineEdit(parent)
{
    setPlaceholderText("请输入信息");
    // 样式为：边框蓝色、圆角、文字间隔、背景透明
    _focusInQss = QString("QLineEdit {"
                          "    border:2px groove rgb(156, 185, 219);"
                          "    border-radius:10px;"
                          "    padding:2px 4px;"
                          "    background-color: rgba(0, 0, 0, 0);"
                          "};");
    // 样式为：边框透明、文字间隔、背景透明
    _focusOutQss = QString("QLineEdit {"
                           "    border: 2px groove rgb(255, 255, 255, 0);"
                           "    border-radius:10px;"
                           "    padding:2px 4px;"
                           "    background-color: rgba(0, 0, 0, 0);"
                           "};");
    setStyleSheet(_focusInQss);
    setAlignment(Qt::AlignCenter);
}
void LineEdit2::focusInEvent(QFocusEvent *event)
{
    setStyleSheet(_focusInQss);
    QLineEdit::focusInEvent(event);
}
void LineEdit2::focusOutEvent(QFocusEvent *event)
{
    if(text().isEmpty())
    {
        setStyleSheet(_focusInQss);
    }else{
        setStyleSheet(_focusOutQss);
    }
    QLineEdit::focusOutEvent(event);
}

QListView

窗口部件

样式表使用方式

QListView

图片.png

支持盒模式。

当alternating row colors属性设置为允许时，交替颜色可通过属性alternate-background-color控制。

被选中的内容部分的前景色和背景需要通过属性selection-color和selection-background-color控制。

选择的行为可以在这里通过属性show-decoration-selected属性控制。

通过子控件-项，可以更精确的控制items，通过::item控制。

背景可滚动，可参照QAbstractScrollArea窗口部件。

示例：QListView定制（注：QListView列表项需要代码加入）

/* altermate-background生效条件： ui->listView->setAlternatingRowColors(true); */
/* 此处alternate-background-color: yellow会被QListView::item:alternate覆盖*/
QListView {
    alternate-background-color: yellow; 
}
QListView {
show-decoration-selected: 1; /* make the selection span the entire width of the view */
}
/* 此处QListView::item:alternate覆盖会alternate-background-color: yellow属性*/
QListView::item:alternate {
    background: #EEEEEE; /* item交替变换颜色，如图中灰色 */
}
QListView::item:selected {
border: 1px solid #6a6ea9;
}
QListView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #ABAFE5, 
                             stop: 1 #8588B2);
}
QListView::item:selected:active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #6a6ea9, 
                             stop: 1 #888dd9);
}
QListView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #FAFBFE, 
                             stop: 1 #DCDEF1);
}

图片.png

QListWidget（参照QListView）

窗口部件	样式表使用方式
QListWidget	参照QListView

QMainWindow

窗口部件

样式表使用方式

QMainWindow

图片.png

支持样式分隔。

当使用QDockWidget样式使用::separator子控件。

示例：QMainWindow与QDockWidget定制分隔条（非QSplitter）

QMainWindow::separator {
    background: yellow;
    width: 10px; /* when vertical */
    height: 10px; /* when horizontal */
}
QMainWindow::separator:hover {
    background: red;
}

图片.png

QMenu

窗口部件

样式表使用方式

QMenu

图片.png

支持盒模式。

每一项都可以使用::item子控件控制，且一般都支持以下状态：:selected，:default，:exclusive，:non-exclusive。

可选择菜单项的指示器可使用::indicator子控件控制。

分隔符可使用::separator控制。

如果菜单项有子项，箭头标记可使用子控件：::right-arrow和::left-arrow控制。

滚动条可以通过::scroller控制。

一触就显示的菜单(tear-off)可以通过::tearoff控制。

示例：QMenu定制

QMenu {
    background-color: #ABABAB; /* sets background of the menu */
    border: 1px solid black;
}
QMenu::item {
    /* sets background of menu item. set this to something non-transparent
       if you want menu color and menu item color to be different */
    background-color: transparent;
}
QMenu::item:selected { 
    /* when user selects item using mouse or keyboard */
    background-color: #654321;
}

图片.png

QMenu {
    background-color: white;
    margin: 2px; /* some spacing around the menu */
}
QMenu::item {
    padding: 2px 25px 2px 20px;
    border: 1px solid transparent; /* reserve space for selection border */
}
QMenu::item:selected {
    border-color: darkblue;
    background: rgba(100, 100, 100, 150);
}
QMenu::icon:checked { /* appearance of a 'checked' icon */
    background: gray;
    border: 1px inset gray;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
}
QMenu::separator {
    height: 2px;
    background: lightblue;
    margin-left: 10px;
    margin-right: 5px;
}
QMenu::indicator {
    width: 13px;
    height: 13px;
}
/* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:non-exclusive:unchecked {
    background-color: rgb(255,0,0,100);
}
QMenu::indicator:non-exclusive:unchecked:selected {
    background-color: rgb(255,0,0,180);
}
QMenu::indicator:non-exclusive:checked {
    background-color: rgb(255,0,0,255);
}
QMenu::indicator:non-exclusive:checked:selected {
    background-color: rgb(0,0,0, 100);
}
/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:exclusive:unchecked {
    background-color: rgb(0,255,0, 100);
}
QMenu::indicator:exclusive:unchecked:selected {
    background-color: rgb(0,255,0,180);
}
QMenu::indicator:exclusive:checked {
    background-color: rgb(0,255,0, 255);
}
QMenu::indicator:exclusive:checked:selected {
    background-color: rgb(0,0,0, 100);
}

图片.png

QMenuBar

窗口部件

样式表使用方式

QMenuBar

图片.png

支持盒模式。

通过spacing属性控制菜单项之间的距离。

菜单项进一步定制可通过::item。

警告：当在Qt/Mac，菜单栏通常被嵌入到系统工具条，这将导致设置的样式失败。

示例：QMenuBar定制

QMenuBar {
    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                 stop:0 lightgray, 
                                 stop:1 darkgray);
}
QMenuBar::item {
    spacing: 3px; /* spacing between menu bar items */
    padding: 1px 4px;
    background: transparent;
    border-radius: 4px;
}
QMenuBar::item:selected { /* when selected using mouse or keyboard */
    background: #a8a8a8;
}
QMenuBar::item:pressed {
    background: #888888;
}

图片.png

QMessageBox（此处仅文本交互）

窗口部件	样式表使用方式
QMessageBox	属性messagebox-text-interaction-flags用于更改消息框中与文本的交互。（5为可选）

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）一

Qt开发专栏：qss样式表笔记大全（点击传送门）

前话

可设置样式的窗口部件列表

QLabel

示例：QToolTip定制

QLineEdit

示例：QLineEdit定制（选中，密码输入，只读）

示例：QLineEdit定制（没有焦点且有内容的时候，不显示边框；有焦点或者无焦点但是有内容的时候显示边框）

QListView

示例：QListView定制（注：QListView列表项需要代码加入）

QListWidget（参照QListView）

QMainWindow

示例：QMainWindow与QDockWidget定制分隔条（非QSplitter）

QMenu

示例：QMenu定制

QMenuBar

示例：QMenuBar定制

QMessageBox（此处仅文本交互）

热门文章

最新文章

相关电子书

相关实验场景

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例） 一

Qt开发专栏：qss样式表笔记大全（点击传送门）

前话

可设置样式的窗口部件列表

QLabel

示例：QToolTip定制

QLineEdit

示例：QLineEdit定制（选中，密码输入，只读）

示例：QLineEdit定制（没有焦点且有内容的时候，不显示边框；有焦点或者无焦点但是有内容的时候显示边框）

QListView

示例：QListView定制（注：QListView列表项需要代码加入）

QListWidget（参照QListView）

QMainWindow

示例：QMainWindow与QDockWidget定制分隔条（非QSplitter）

QMenu

示例：QMenu定制

QMenuBar

示例：QMenuBar定制

QMessageBox（此处仅文本交互）

热门文章

最新文章

相关电子书

相关实验场景

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）一