diff --git a/CMakeLists.txt b/CMakeLists.txt index 64e28cb..90009a3 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -40,6 +40,7 @@ else() ${PROJECT_SOURCES} model/data.h resource.qrc + sessionfriendarea.h sessionfriendarea.cpp ) endif() endif() diff --git a/mainwidget.cpp b/mainwidget.cpp index da02d98..9c4d81b 100644 --- a/mainwidget.cpp +++ b/mainwidget.cpp @@ -1,6 +1,9 @@ #include "mainwidget.h" #include "./ui_mainwidget.h" #include +#include + +#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 +} + + diff --git a/mainwidget.h b/mainwidget.h index 9a22245..45db1a1 100644 --- a/mainwidget.h +++ b/mainwidget.h @@ -3,6 +3,7 @@ #include #include +#include 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 diff --git a/resource.qrc b/resource.qrc index b209b1a..0eacad7 100644 --- a/resource.qrc +++ b/resource.qrc @@ -21,5 +21,6 @@ resource/image/sound_active.png resource/image/submit.png resource/image/unchecked.png + resource/image/defaultAv.png diff --git a/resource/image/defaultAv.png b/resource/image/defaultAv.png new file mode 100644 index 0000000..4651a63 Binary files /dev/null and b/resource/image/defaultAv.png differ diff --git a/sessionfriendarea.cpp b/sessionfriendarea.cpp new file mode 100644 index 0000000..c97fd5e --- /dev/null +++ b/sessionfriendarea.cpp @@ -0,0 +1,40 @@ +#include "sessionfriendarea.h" +#include +#include +#include + +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) +{ + +} diff --git a/sessionfriendarea.h b/sessionfriendarea.h new file mode 100644 index 0000000..d21d613 --- /dev/null +++ b/sessionfriendarea.h @@ -0,0 +1,46 @@ +#ifndef SESSIONFRIENDAREA_H +#define SESSIONFRIENDAREA_H + +#include +#include + + +//////////////////////////////////////// +/// 整个滚动区域的实现 +//////////////////////////////////////// + +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