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_OBJECT

public:
    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_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    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);
}