Qt QListWidget 代码范例，以及Qt 天坑：setStyleSheet失效问题

一、坑之所在

1.写了StyleSheet的QString并进行了设置

this->setStyleSheet(styleSheet_M);

2.注释后，将StyleSheet换到UI form里去，然后又手动清理了UI form里的StyleSheet
重新使用代码设置，此时代码设置失效了

二、根本解决

1.手动从UI form里删掉StyleSheet也没用，还要删除widget.ui 文件里的styleSheet属性
widget.ui:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0"><class>Widget</class><widget class="QWidget" name="Widget"><property name="geometry"><rect><x>0</x><y>0</y><width>500</width><height>341</height></rect></property><property name="windowTitle"><string>Widget</string></property><property name="styleSheet"><string notr="true"/></property></widget><resources/><connections/>
</ui>

2.用其他编辑器打开 widget.ui 后，删除空的 styleSheet 属性：

  <property name="styleSheet"><string notr="true"/></property>

3.然后就可以了

三、源码

widget.h:

#ifndef WIDGET_H
#define WIDGET_H#include <QDebug>
#include <QWidget>
#include <QListWidget>
#include <QPushButton>
#include <QLabel>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QMessageBox>class TableItemWidget : public QWidget {Q_OBJECTpublic:explicit TableItemWidget(const QString &lineName, QWidget *parent = nullptr) : QWidget(parent) {QHBoxLayout *layout = new QHBoxLayout(this);// 左边的文字QLabel *label = new QLabel(this);layout->addWidget(label);// 右边的按钮QPushButton *button = new QPushButton(this);button->setIcon(QIcon(":/icons/settings.png"));  // 替换为实际的图标路径layout->addStretch();  // 在按钮前添加一个伸缩空间，使按钮在右边layout->addWidget(button);// 按钮点击事件connect(button, &QPushButton::clicked, this, [=]() {//QMessageBox::information(this, "按钮点击", lineName + " 的设置按钮被点击了！");qDebug() << "按钮点击,你点击了按钮:" << lineName;});setLayout(layout);}
};QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();private:Ui::Widget *ui;
};const QString styleSheet_M = R"(/* 整体窗口的背景颜色 */QWidget {color: #ECEFF4;font-family: "Arial";font-size: 14px;}/* QListWidget 样式 */QListWidget {background-color: #3B4252;border: 1px solid #4C566A;border-radius: 5px;}/* QListWidget item 样式 */QListWidget::item {background-color: #4C566A;padding: 3px;border-bottom: 2px solid #434C5E;}/* 鼠标悬停时的 item 样式 */QListWidget::item:hover {background-color: #5E81AC;color: white;}/* 被选中时的 item 样式 */QListWidget::item:selected {background-color: #88C0D0;color: black;}/* 调整 QPushButton 的尺寸和外观 */QPushButton {background-color: #4C566A;color: #ECEFF4;border: 1px solid #434C5E;border-radius: 5px;padding: 5px 10px;min-width: 20px; /* 设置按钮的最小宽度 */min-height: 20px; /* 设置按钮的最小高度 */}/* 鼠标悬停时的按钮样式 */QPushButton:hover {background-color: #5E81AC;border: 2px solid #88C0D0;}/* 按下时的按钮样式 */QPushButton:pressed {background-color: #88C0D0;color: black;}/* 设置滚动条样式 */QScrollBar:vertical {width: 10px;background: transparent;margin: 2px 2px 0px 0px;border-radius: 5px;}QScrollBar::handle:vertical {width: 10px;background: rgb(140, 140, 140);border-radius: 5px;}QScrollBar::handle:vertical:hover {background: rgb(120, 120, 120);}QScrollBar::add-line:vertical,QScrollBar::sub-line:vertical {width: 0px;height: 0px;border-radius: 5px; /* Optional if border-radius is not visible */}QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical {background: transparent;border-radius: 5px;})";#endif // WIDGET_H

widget.cpp:

#include "widget.h"
#include "ui_widget.h"Widget::~Widget()
{delete ui;
}Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget)
{QVBoxLayout *mainLayout = new QVBoxLayout(this);this->setStyleSheet(styleSheet_M);// 创建 QListWidget 来容纳每个预置位项目QListWidget *tableList = new QListWidget(this);// 添加自定义的行项目for (int i = 0; i < 255; ++i) {QListWidgetItem *item = new QListWidgetItem(tableList);TableItemWidget *tableWidget = new TableItemWidget(QString("Table Line %1").arg(i), this);// 设置行高度item->setSizeHint(tableWidget->sizeHint());item->setText(QString("Table Line %1").arg(i));item->setIcon(QIcon());  // 明确设置为空图标tableList->addItem(item);tableList->setItemWidget(item, tableWidget);}mainLayout->addWidget(tableList);setLayout(mainLayout);// 行点击事件处理connect(tableList, &QListWidget::itemClicked, this, [=](QListWidgetItem *item) {//QMessageBox::information(this, "行点击", "你点击了行: " + item->text());qDebug() << "行点击,你点击了行:" << item->text();});ui->setupUi(this);
}