promote ui

mainwidget.cpp

@@ -148,12 +148,17 @@ void MainWidget::initMidWindow()
     QWidget* spacer3 = new QWidget();
     spacer3->setFixedWidth(10);
 
+    QWidget* spacer4 = new QWidget();
+    spacer4->setFixedHeight(10);
+
     layout->addWidget(spacer1, 0, 0);
     layout->addWidget(searchEdit, 0, 1);
     layout->addWidget(spacer2, 0, 2);
     layout->addWidget(addFriendBtn, 0 ,3);
     layout->addWidget(spacer3, 0, 4);
-    layout->addWidget(sessionFriendArea, 1, 0, 1, 5);
+
+    layout->addWidget(spacer4, 1, 0);
+    layout->addWidget(sessionFriendArea, 2, 0, 1, 5);
 }
 
 void MainWidget::initRightWindow()

sessionfriendarea.cpp

@@ -11,8 +11,41 @@ SessionFriendArea::SessionFriendArea(QWidget *parent)
     //设置这个才能有滚动效果
     this->setWidgetResizable(true);
     //设置滚动条相关样式
-    this->verticalScrollBar()->setStyleSheet("QScrollBar:vertical { width: 2px; background-color: rgb(46, 46, 46); }");
+    // this->verticalScrollBar()->setStyleSheet("QScrollBar:vertical { width: 2px; background-color: rgb(46, 46, 46); }");
-    this->horizontalScrollBar()->setStyleSheet("QScrollBar:horizontal { height: 0px; }");
+    //去除或隐藏水平滚动条
+    // this->horizontalScrollBar()->setStyleSheet("QScrollBar:horizontal { height: 0px; }");
+    this->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+    this->verticalScrollBar()->setStyleSheet(R"(
+    QScrollBar:vertical {
+        background-color: rgb(231, 231, 231);      /* 滚动条背景透明 */
+        width: 6px;                  /* 默认宽度 */
+        margin: 0px 0px 0px 0px;     /* 边距清零 */
+    }
+    QScrollBar::handle:vertical {
+        background: #CCCCCC;         /* 滑块颜色（浅灰色） */
+        min-height: 30px;            /* 滑块最小高度 */
+        border-radius: 3px;          /* 圆角 */
+    }
+    QScrollBar::handle:vertical:hover {
+        background: #999999;         /* 悬停时滑块颜色加深 */
+        width: 10px;                 /* 悬停时宽度增大 */
+    }
+    QScrollBar::handle:vertical:pressed {
+        background: #666666;         /* 按下时颜色更深 */
+    }
+    QScrollBar::add-line:vertical,
+    QScrollBar::sub-line:vertical {
+        height: 0px;                 /* 隐藏上下箭头按钮 */
+        background: none;
+    }
+    QScrollBar::add-page:vertical,
+    QScrollBar::sub-page:vertical {
+        background: none;            /* 滚动条背景区域透明 */
+    }
+)");
+
+    //去除默认的黑边
+    this->setStyleSheet("border: 0px solid transparent;");
 
     // 把widget创建出来
     container = new QWidget();
@@ -38,7 +71,7 @@ SessionFriendArea::SessionFriendArea(QWidget *parent)
 #if TEST_UI
         QIcon icon(":/resource/image/defaultAv.png");
         for(int i = 0; i < 30; i++) {
-            this->addItem(icon, "xyz" + QString::number(i), "test: last message..." + QString::number(i));
+            this->addItem(icon, "张三" + QString::number(i), "test: last message..." + QString::number(i));
         }
     // LOG() << "hello world!";
 #endif
@@ -52,8 +85,12 @@ SessionFriendItem::SessionFriendItem(QWidget* owner, const QIcon& avatar, const
 
     //创建网格布局管理器
     QGridLayout* layout = new QGridLayout();
-    layout->setContentsMargins(0, 0, 0, 0);
+    layout->setContentsMargins(20, 0, 0, 0);
-    layout->setSpacing(0);
+    // layout->setSpacing(0);
+
+    layout->setHorizontalSpacing(10);
+    layout->setVerticalSpacing(0);
+
     this->setLayout(layout);
 
     //创建头像
@@ -84,6 +121,65 @@ SessionFriendItem::SessionFriendItem(QWidget* owner, const QIcon& avatar, const
     layout->addWidget(messageLabel, 1, 2, 1, 1);
 }
 
+void SessionFriendItem::paintEvent(QPaintEvent *event)
+{
+    (void) event;
+    QStyleOption opt;
+    opt.initFrom(this);
+    QPainter p(this);
+    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
+}
+
+void SessionFriendItem::mousePressEvent(QMouseEvent *event)
+{
+    (void) event;
+
+    select();
+}
+
+void SessionFriendItem::enterEvent(QEvent *event)
+{
+    (void) event;
+
+    if(this->selected) {
+        return;
+    }
+
+    this->setStyleSheet("QWidget { background-color: rgb(220, 220, 220); }");
+}
+
+void SessionFriendItem::leaveEvent(QEvent *event)
+{
+    (void) event;
+
+    if(this->selected) {
+        return;
+    }
+
+    this->setStyleSheet("QWidget { background-color: rgb(231, 231, 231); }");
+}
+
+void SessionFriendItem::select()
+{
+    //遍历其他元素(还原背景色)
+    const QObjectList children = this->parentWidget()->children();
+    for(QObject* child : children) {
+        if(!child->isWidgetType()) {
+            continue;
+        }
+        //说明是widget  那就将child强转为SessionFriendItem
+        SessionFriendItem* item = dynamic_cast<SessionFriendItem*>(child);
+        if(item->selected) {
+            item->selected = false;
+            item->setStyleSheet("QWidget { background-color: rgb(231, 231, 231); }");
+        }
+    }
+    //鼠标点击时会触发这个事件
+    //点击时修改背景色
+    this->setStyleSheet("QWidget { background-color: rgb(210, 210, 210); }");
+    this->selected = true;
+}
+
 void SessionFriendArea::clear()
 {
     QLayout* layout = container->layout();

sessionfriendarea.h

@@ -10,7 +10,10 @@
 #include <QLabel>
 #include <QIcon>
 #include <QString>
-#include <iostream>
+// #include <iostream>
+#include <QStyleOption>
+#include <QPainter>
+#include <QEnterEvent>
 
 
 ////////////////////////////////////////
@@ -50,6 +53,14 @@ class SessionFriendItem : public QWidget {
 public:
     SessionFriendItem(QWidget* owner, const QIcon& avatar, const QString& name, const QString& text);
 
+    //通过显式绘制控件的基础样式，解决了自定义控件因未正确处理Qt样式表机制导致的QSS不生效问题
+    void paintEvent(QPaintEvent* event) override;
+    void mousePressEvent(QMouseEvent* event) override;
+    void enterEvent(QEvent* event) override;
+    void leaveEvent(QEvent* event) override;
+
+    void select();
+
 private:
     //owner 就是指向了 SessionFriendArea
     QWidget* owner;