mirror of
https://gitee.com/Zhaoxin59/my-chat_-client.git
synced 2026-02-13 16:41:48 +08:00
add choose friend to group chats
This commit is contained in:
@ -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
233
choosefrienddialog.cpp
Normal 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
55
choosefrienddialog.h
Normal 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;
|
||||
};
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user