Write the layout

CMakeLists.txt

@@ -40,6 +40,7 @@ else()
             ${PROJECT_SOURCES}
             model/data.h
             resource.qrc
+            sessionfriendarea.h sessionfriendarea.cpp
         )
     endif()
 endif()

mainwidget.cpp

@@ -1,6 +1,9 @@
 #include "mainwidget.h"
 #include "./ui_mainwidget.h"
 #include <QHBoxLayout>
+#include <QVBoxLayout>
+
+#include "sessionfriendarea.h"
 
 MainWidget *MainWidget::instance = nullptr;
 
@@ -20,6 +23,9 @@ MainWidget::MainWidget(QWidget *parent)
 {
     ui->setupUi(this);
 
+    // this->setStyleSheet("MainWidget {min-height: 6000px; }");
+    this->resize(QSize(1280, 800));
+
     this->setWindowTitle("MyChat");
     this->setWindowIcon(QIcon(":/resource/image/logo.png"));
 
@@ -31,6 +37,8 @@ MainWidget::MainWidget(QWidget *parent)
     initMidWindow();
     //初始化右侧窗口的样式布局
     initRightWindow();
+    //初始化信号槽
+    initSignalSlot();
 }
 
 MainWidget::~MainWidget()
@@ -51,6 +59,7 @@ void MainWidget::initMainWindow()
     windowMid = new QWidget();
     windowRight = new QWidget();
 
+
     windowLeft->setFixedWidth(70);
     windowMid->setFixedWidth(310);
     windowRight->setMinimumWidth(900);
@@ -66,15 +75,154 @@ void MainWidget::initMainWindow()
 
 void MainWidget::initLeftWindow()
 {
+    QVBoxLayout* layout = new QVBoxLayout();
+
+    layout->setSpacing(20);
+    layout->setContentsMargins(0, 50, 0, 0);
+
+    windowLeft->setLayout(layout);
+
+    //添加用户头像
+    userAvatar = new QPushButton();
+    userAvatar->setFixedSize(45, 45);
+    userAvatar->setIconSize(QSize(45, 45));
+    userAvatar->setIcon(QIcon(":/resource/image/defaultAv.png"));
+    userAvatar->setStyleSheet("QPushButton {background-color: transparent; }");
+    layout->addWidget(userAvatar, 1, Qt::AlignTop | Qt::AlignCenter);
+
+    //添加会话标签页按钮
+    sessionTabBtn = new QPushButton();
+    sessionTabBtn->setFixedSize(45, 45);
+    sessionTabBtn->setIconSize(QSize(35, 35));
+    sessionTabBtn->setIcon(QIcon(":/resource/image/session_active.png"));
+    sessionTabBtn->setStyleSheet("QPushButton {background-color: transparent; }");
+    layout->addWidget(sessionTabBtn, 1, Qt::AlignTop | Qt::AlignCenter);
+
+    //添加好友标签页按钮
+    friendTabBtn = new QPushButton();
+    friendTabBtn->setFixedSize(45, 45);
+    friendTabBtn->setIconSize(QSize(35, 35));
+    friendTabBtn->setIcon(QIcon(":/resource/image/friend_inactive.png"));
+    friendTabBtn->setStyleSheet("QPushButton {background-color: transparent; }");
+    layout->addWidget(friendTabBtn, 1, Qt::AlignTop | Qt::AlignCenter);
+
+    //添加好友申请标签页按钮
+    applyTabBtn = new QPushButton();
+    applyTabBtn->setFixedSize(45, 45);
+    applyTabBtn->setIconSize(QSize(35, 35));
+    applyTabBtn->setIcon(QIcon(":/resource/image/apply_inactive.png"));
+    applyTabBtn->setStyleSheet("QPushButton {background-color: transparent; }");
+    layout->addWidget(applyTabBtn, 1, Qt::AlignTop | Qt::AlignCenter);
+
+    layout->addStretch(20);
 
 }
-
 void MainWidget::initMidWindow()
 {
+    QGridLayout* layout = new QGridLayout();
+    //距离上方有20px，另外的三个方向都不要边距
+    layout->setContentsMargins(0, 20, 0, 0);
+    layout->setSpacing(0);
+    windowMid->setLayout(layout);
 
+    searchEdit = new QLineEdit();
+    searchEdit->setFixedHeight(30);
+    searchEdit->setPlaceholderText("搜索");
+    searchEdit->setStyleSheet("QLineEdit {border-radius: 5px; background-color: rgb(226, 226, 226); padding-left: 5px }");
+
+    addFriendBtn = new QPushButton();
+    addFriendBtn->setFixedSize(30, 30);
+    addFriendBtn->setIcon(QIcon(":/resource/image/cross.png"));
+    QString style = R"(QPushButton { border-radius: 5px; background-color: rgb(226, 226, 226); }
+                        QPushButton::pressed { background-color: rgb(240, 240, 240); })";
+    addFriendBtn->setStyleSheet(style);
+
+    SessionFriendArea* sessionFriendArea = new SessionFriendArea();
+
+    //为了更加灵活的控制边距，只影响搜索框和按钮的这一行，
+    //创建空白的widget填充到布局管理器上
+    QWidget* spacer1 = new QWidget();
+    spacer1->setFixedWidth(10);
+    QWidget* spacer2 = new QWidget();
+    spacer2->setFixedWidth(10);
+    QWidget* spacer3 = new QWidget();
+    spacer3->setFixedWidth(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);
 }
 
 void MainWidget::initRightWindow()
 {
 
 }
+
+void MainWidget::initSignalSlot()
+{
+    /////////////////////////////////////
+    //连接信号槽，处理标签页切换
+    /////////////////////////////////////
+    connect(sessionTabBtn, &QPushButton::clicked, this, &MainWidget::switchTabToSession);
+    connect(friendTabBtn, &QPushButton::clicked, this, &MainWidget::switchTabToFriend);
+    connect(applyTabBtn, &QPushButton::clicked, this, &MainWidget::switchTabToApply);
+}
+
+void MainWidget::switchTabToSession()
+{
+    //记录当前切换到了哪个标签页
+    activeTab = SESSION_LIST;
+    //调整图标显示情况
+    sessionTabBtn->setIcon(QIcon(":/resource/image/session_active.png"));
+    friendTabBtn->setIcon(QIcon(":/resource/image/friend_inactive.png"));
+    applyTabBtn->setIcon(QIcon(":/resource/image/apply_inactive.png"));
+    // 在主窗口的中间部分，加载出会话列表数据
+    this->loadSessionList();
+}
+
+void MainWidget::switchTabToFriend()
+{
+    //记录当前切换到了哪个标签页
+    activeTab = FRIEND_LIST;
+    //调整图标显示情况
+    sessionTabBtn->setIcon(QIcon(":/resource/image/session_inactive.png"));
+    friendTabBtn->setIcon(QIcon(":/resource/image/friend_active.png"));
+    applyTabBtn->setIcon(QIcon(":/resource/image/apply_inactive.png"));
+    // 在主窗口的中间部分，加载出会话列表数据
+    this->loadFriendList();
+}
+
+void MainWidget::switchTabToApply()
+{
+    //记录当前切换到了哪个标签页
+    activeTab = APPLY_LIST;
+    //调整图标显示情况
+    sessionTabBtn->setIcon(QIcon(":/resource/image/session_inactive.png"));
+    friendTabBtn->setIcon(QIcon(":/resource/image/friend_inactive.png"));
+    applyTabBtn->setIcon(QIcon(":/resource/image/apply_active.png"));
+    // 在主窗口的中间部分，加载出会话列表数据
+    this->loadApplyList();
+}
+
+//加载会话列表
+void MainWidget::loadSessionList()
+{
+    //TODO
+}
+
+//加载好友列表
+void MainWidget::loadFriendList()
+{
+    //TODO
+}
+
+//加载申请列表
+void MainWidget::loadApplyList()
+{
+    //TODO
+}
+
+

mainwidget.h

@@ -3,6 +3,7 @@
 
 #include <QWidget>
 #include <QPushButton>
+#include <QLineEdit>
 
 QT_BEGIN_NAMESPACE
 namespace Ui {
@@ -42,9 +43,32 @@ private:
     //好友申请标签页按钮
     QPushButton* applyTabBtn;
 
+    //用户搜索框
+    QLineEdit* searchEdit;
+    //添加好友按钮
+    QPushButton* addFriendBtn;
+
+    enum ActiveTab {
+        SESSION_LIST,
+        FRIEND_LIST,
+        APPLY_LIST
+    };
+
+    ActiveTab activeTab = SESSION_LIST;
+
     void initMainWindow();
     void initLeftWindow();
     void initMidWindow();
     void initRightWindow();
+
+    void initSignalSlot();
+
+    void switchTabToSession();
+    void switchTabToFriend();
+    void switchTabToApply();
+
+    void loadSessionList();
+    void loadFriendList();
+    void loadApplyList();
 };
 #endif // MAINWIDGET_H

resource.qrc

@@ -21,5 +21,6 @@
         <file>resource/image/sound_active.png</file>
         <file>resource/image/submit.png</file>
         <file>resource/image/unchecked.png</file>
+        <file>resource/image/defaultAv.png</file>
     </qresource>
 </RCC>

sessionfriendarea.cpp

@@ -0,0 +1,40 @@
+#include "sessionfriendarea.h"
+#include <QScrollBar>
+#include <QVBoxLayout>
+#include <QPushButton>
+
+SessionFriendArea::SessionFriendArea(QWidget *parent)
+    : QScrollArea {parent}
+{
+    //设置必要属性
+    //设置这个才能有滚动效果
+    this->setWidgetResizable(true);
+    //设置滚动条相关样式
+    this->verticalScrollBar()->setStyleSheet("QScrollBar:vertical { width: 2px; background-color: rgb(46, 46, 46); }");
+    this->horizontalScrollBar()->setStyleSheet("QScrollBar:horizontal { height: 0px; }");
+
+    // 把widget创建出来
+    container = new QWidget();
+    container->setFixedWidth(310);
+    this->setWidget(container);
+
+    //给这个widget添加布局管理器，方便后续添加元素进去
+    QVBoxLayout* layout = new QVBoxLayout();
+    layout->setContentsMargins(0, 0, 0, 0);
+    layout->setSpacing(0);
+    layout->setAlignment(Qt::AlignTop);
+    container->setLayout(layout);
+
+    // //简单测试一下滚动的效果(just for testing...)
+    // for(int i = 0; i < 50; i++) {
+    //     QPushButton* btn = new QPushButton();
+    //     QString Sbtn = "button: " + QString::number(i);
+    //     btn->setText(Sbtn);
+    //     layout->addWidget(btn);
+    // }
+}
+
+SessionFriendItem::SessionFriendItem(QWidget *owner, const QIcon *avatar, const QString *name, const QString &text)
+{
+
+}

sessionfriendarea.h

@@ -0,0 +1,46 @@
+#ifndef SESSIONFRIENDAREA_H
+#define SESSIONFRIENDAREA_H
+
+#include <QWidget>
+#include <QScrollArea>
+
+
+////////////////////////////////////////
+/// 整个滚动区域的实现
+////////////////////////////////////////
+
+class SessionFriendArea : public QScrollArea
+{
+    Q_OBJECT
+public:
+    explicit SessionFriendArea(QWidget *parent = nullptr);
+
+private:
+    //后续向container中的layout添加元素，就会有QScrollArea的滚动
+    QWidget* container;
+
+signals:
+};
+
+
+////////////////////////////////////////
+/// 滚动区域的Item的实现
+////////////////////////////////////////
+
+class SessionFriendItem : public QWidget {
+    //可以使当前的类使用信号与槽相关的操作
+    Q_OBJECT
+
+public:
+    SessionFriendItem(QWidget* owner, const QIcon* avatar, const QString* name, const QString& text);
+
+private:
+    //owner 就是指向了 SessionFriendArea
+    QWidget* owner;
+
+    //表示当前的Item是否是选中的状态
+    bool selected = false;
+};
+
+
+#endif // SESSIONFRIENDAREA_H