add choose friend to group chats

This commit is contained in:
xyz
2025-06-01 12:13:00 +08:00
parent 8b3290b755
commit a814d43d45
5 changed files with 300 additions and 5 deletions

View File

@ -38,6 +38,8 @@ set(PROJECT_SOURCES
userinfowidget.cpp
sessiondetailwidget.h
sessiondetailwidget.cpp
choosefrienddialog.h
choosefrienddialog.cpp
)
if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)

233
choosefrienddialog.cpp Normal file
View File

@ -0,0 +1,233 @@
#include "choosefrienddialog.h"
////////////////////////////////////////////////
/// 选择好友窗口中的一个 元素/好友项
////////////////////////////////////////////////
ChooseFriendItem::ChooseFriendItem(ChooseFriendDialog* owner, const QIcon& avatar, const QString& name, bool checked)
{
// 1. 设置控件的基本属性
this->setFixedHeight(50);
this->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
// 2. 设置布局管理器
QHBoxLayout* layout = new QHBoxLayout();
layout->setSpacing(10);
layout->setContentsMargins(20, 0, 20, 0);
this->setLayout(layout);
// 3. 创建复选框
checkBox = new QCheckBox();
checkBox->setChecked(checked);
checkBox->setFixedSize(25, 25);
QString style = "QCheckBox { background-color: transparent; } QCheckBox::indicator { width: 20px; height: 20px; image: url(:/resource/image/unchecked.png);}";
style += "QCheckBox::indicator:checked { image: url(:/resource/image/checked.png);}";
checkBox->setStyleSheet(style);
// 4. 创建头像
avatarBtn = new QPushButton();
avatarBtn->setFixedSize(40, 40);
avatarBtn->setIconSize(QSize(40, 40));
avatarBtn->setIcon(avatar);
// 5. 创建名字
nameLabel = new QLabel();
nameLabel->setText(name);
nameLabel->setStyleSheet("QLabel {background-color: transparent;}");
// 6. 添加上述内容到布局管理器中
layout->addWidget(checkBox);
layout->addWidget(avatarBtn);
layout->addWidget(nameLabel);
// 7. 连接信号槽
connect(checkBox, &QCheckBox::toggled, this, [=](bool checked) {
if (checked) {
// 勾选了复选框, 把当前这个 Item, 添加到右侧的已选择区域
owner->addSelectedFriend(avatar, name);
}
else {
// 取消勾选
//owner->deleteSelectedFriend(userId);
}
});
}
void ChooseFriendItem::paintEvent(QPaintEvent* event)
{
//根据鼠标进入的状态,来决定绘制成不同的颜色
QPainter painter(this);
if (isHover) {
//绘制成深色
painter.fillRect(this->rect(), QColor(230, 230, 230));
}
else {
//绘制成浅色
painter.fillRect(this->rect(), QColor(255, 255, 255));
}
}
void ChooseFriendItem::enterEvent(QEnterEvent* event)
{
(void)event;
isHover = true;
//相当于界面更新
this->update();
//this->repaint();
}
void ChooseFriendItem::leaveEvent(QEvent* event)
{
(void)event;
isHover = false;
this->update();
}
ChooseFriendDialog::ChooseFriendDialog(QWidget *parent)
: QDialog(parent)
{
// 1. 设置窗口的基本属性
this->setWindowTitle("选择好友");
this->setWindowIcon(QIcon(":/resource/image/logo.png"));
this->setFixedSize(750, 550);
this->setStyleSheet("QDialog { background-color: rgb(255, 255, 255);}");
this->setAttribute(Qt::WA_DeleteOnClose);
// 2. 创建布局管理器
QHBoxLayout* layout = new QHBoxLayout();
layout->setContentsMargins(0, 0, 0, 0);
layout->setSpacing(0);
this->setLayout(layout);
// 3. 针对左侧窗口进行初始化
initLeft(layout);
// 4. 针对右侧窗口进行初始化
initRight(layout);
}
void ChooseFriendDialog::initLeft(QHBoxLayout* layout)
{
// 1. 创建滚动区域
QScrollArea* scrollArea = new QScrollArea();
scrollArea->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
scrollArea->setWidgetResizable(true);
scrollArea->horizontalScrollBar()->setStyleSheet("QScrollBar:horizontal { height: 0px;}");
scrollArea->verticalScrollBar()->setStyleSheet("QScrollBar:vertical { width: 2px; background-color: rgb(255, 255, 255) }");
scrollArea->setStyleSheet("QScrollArea { border:none; }");
layout->addWidget(scrollArea, 1);
// 2. 创建 QWidget 设置到滚动区域中.
totalContainer = new QWidget();
totalContainer->setObjectName("totalContainer");
totalContainer->setStyleSheet("#totalContainer { background-color: rgb(255, 255, 255); }");
scrollArea->setWidget(totalContainer);
// 3. 创建左侧子窗口内部的 垂直布局管理器
QVBoxLayout* vlayout = new QVBoxLayout();
vlayout->setSpacing(0);
vlayout->setContentsMargins(0, 0, 0, 0);
vlayout->setAlignment(Qt::AlignTop);
totalContainer->setLayout(vlayout);
// 还需要进一步的添加 vlayout 内部的元素, 才能看到效果!
// 此处也是先构造测试数据, 后续接入服务器之后, 从服务器拿到真实的好友列表, 再添加真实的数据
#if TEST_UI
QIcon defaultAvatar(":/resource/image/defaultAvatar.png");
for (int i = 0; i < 15; ++i) {
this->addFriend(defaultAvatar, "张三" + QString::number(i), false);
}
#endif
}
void ChooseFriendDialog::initRight(QHBoxLayout* layout)
{
// 1. 创建右侧的布局管理器
QGridLayout* gridLayout = new QGridLayout();
gridLayout->setContentsMargins(20, 0, 20, 20);
gridLayout->setSpacing(10);
layout->addLayout(gridLayout, 1);
// 2. 创建 "提示" label
QLabel* tipLabel = new QLabel();
tipLabel->setText("选择联系人");
tipLabel->setFixedHeight(30);
tipLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
tipLabel->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
tipLabel->setStyleSheet("QLabel { font-size: 16px; font-weight: 700}");
// 3. 创建滚动区域
QScrollArea* scrollArea = new QScrollArea();
scrollArea->setWidgetResizable(true);
scrollArea->verticalScrollBar()->setStyleSheet("QScrollBar:vertical { width: 2px; background-color: rgb(255, 255, 255);}");
scrollArea->horizontalScrollBar()->setStyleSheet("QScrollBar:horizontal {height: 0px;}");
scrollArea->setStyleSheet("QScrollArea {border: none;}");
scrollArea->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
// 4. 创建滚动区域中的 QWidget
selectedContainer = new QWidget();
selectedContainer->setObjectName("selectedContainer");
selectedContainer->setStyleSheet("#selectedContainer { background-color: rgb(255, 255, 255); }");
scrollArea->setWidget(selectedContainer);
// 5. 创建 selectedContainer 中的 "垂直布局"
QVBoxLayout* vlayout = new QVBoxLayout();
vlayout->setSpacing(0);
vlayout->setContentsMargins(0, 0, 0, 0);
vlayout->setAlignment(Qt::AlignTop);
selectedContainer->setLayout(vlayout);
// 6. 创建底部按钮
QString style = "QPushButton { color: rgb(7, 191, 96); background-color: rgb(240, 240, 240); border: none; border-radius: 5px;}";
style += "QPushButton:hover { background-color: rgb(220, 220, 220); } QPushButton:pressed { background-color: rgb(200, 200, 200); }";
QPushButton* okBtn = new QPushButton();
okBtn->setFixedHeight(40);
okBtn->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
okBtn->setText("完成");
okBtn->setStyleSheet(style);
QPushButton* cancelBtn = new QPushButton();
cancelBtn->setFixedHeight(40);
cancelBtn->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
cancelBtn->setText("取消");
cancelBtn->setStyleSheet(style);
// 7. 把上述控件添加到布局中
gridLayout->addWidget(tipLabel, 0, 0, 1, 9);
gridLayout->addWidget(scrollArea, 1, 0, 1, 9);
gridLayout->addWidget(okBtn, 2, 1, 1, 3);
gridLayout->addWidget(cancelBtn, 2, 5, 1, 3);
// 构造一些数据用来进行测试界面
#if 0
// 此处的数据通过勾选左侧列表来生成.
QIcon defaultAvatar(":/resource/image/defaultAvatar.png");
for (int i = 0; i < 10; ++i) {
this->addSelectedFriend(defaultAvatar, "张三" + QString::number(i));
}
#endif
//// 8. 添加信号槽, 处理 ok 和 cancel 的点击
//connect(okBtn, &QPushButton::clicked, this, &ChooseFriendDialog::clickOkBtn);
//connect(cancelBtn, &QPushButton::clicked, this, [=]() {
// this->close();
// });
}
void ChooseFriendDialog::addFriend(const QIcon& avatar, const QString& name, bool checked)
{
ChooseFriendItem* item = new ChooseFriendItem(this, avatar, name, checked);
totalContainer->layout()->addWidget(item);
}
void ChooseFriendDialog::addSelectedFriend(const QIcon& avatar, const QString& name)
{
ChooseFriendItem* item = new ChooseFriendItem(this, avatar, name, true);
selectedContainer->layout()->addWidget(item);
}

55
choosefrienddialog.h Normal file
View File

@ -0,0 +1,55 @@
#pragma once
#include <QDialog>
#include <QWidget>
#include <QHBoxLayout>
#include <QScrollArea>
#include <QScrollBar>
#include <QPushButton>
#include <QPainter>
#include <QCheckBox>
#include <QLabel>
#include "debug.h"
class ChooseFriendDialog;
////////////////////////////////////////////////
/// 选择好友窗口中的一个 元素/好友项
////////////////////////////////////////////////
class ChooseFriendItem : public QWidget {
Q_OBJECT
public:
ChooseFriendItem(ChooseFriendDialog* owner, const QIcon& avatar, const QString& name, bool checked);
void paintEvent(QPaintEvent* event) override;
void enterEvent(QEnterEvent* event) override;
void leaveEvent(QEvent* event) override;
private:
bool isHover = false;
QCheckBox* checkBox;
QPushButton* avatarBtn;
QLabel* nameLabel;
ChooseFriendDialog* owner; //记录了哪个QWidget持有这个Item此处应该是ChooseFriendDialog
};
class ChooseFriendDialog : public QDialog
{
Q_OBJECT
public:
ChooseFriendDialog(QWidget *parent);
void initLeft(QHBoxLayout* layout);
void initRight(QHBoxLayout* layout);
void addFriend(const QIcon& avatar, const QString& name, bool checked);
void addSelectedFriend(const QIcon& avatar, const QString& name);
private:
QWidget* totalContainer;
QWidget* selectedContainer;
};

View File

@ -86,11 +86,11 @@ SessionDetailWidget::SessionDetailWidget(QWidget *parent)
deleteFriendBtn->setStyleSheet(style);
layout->addWidget(deleteFriendBtn, 1, 0, 1, 3);
//// 6. 添加信号槽, 处理点击 "创建群聊" 按钮
//connect(createGroupBtn->getAvatar(), &QPushButton::clicked, this, [=]() {
// ChooseFriendDialog* chooseFriendDialog = new ChooseFriendDialog(this, userInfo.userId);
// chooseFriendDialog->exec();
// });
// 6. 添加信号槽, 处理点击 "创建群聊" 按钮
connect(createGroupBtn->getAvatar(), &QPushButton::clicked, this, [=]() {
ChooseFriendDialog* chooseFriendDialog = new ChooseFriendDialog(this);
chooseFriendDialog->exec();
});
//connect(deleteFriendBtn, &QPushButton::clicked, this, &SessionDetailWidget::clickDeleteFriendBtn);

View File

@ -12,6 +12,7 @@
#include "debug.h"
#include "model/data.h"
#include "choosefrienddialog.h"
using namespace model;
@ -22,6 +23,10 @@ class AvatarItem : public QWidget {
public:
AvatarItem(const QIcon& avatar, const QString& name);
QPushButton* getAvatar() {
return avatarBtn;
}
private:
QPushButton* avatarBtn;
QLabel* nameLabel;