Vc - Qt -仿照微信聊天窗口 - demov.1.0 初步展示
在本次更新中，我们将展示一个初步的微信聊天窗口界面，基于Qt技术栈开发。这个版本主要是为了展示基本的UI和功能框架，而不是一个完整的产品。
界面设计
我们的目标是创建一个类似微信的聊天窗口界面，包括以下组件：
* 顶部导航栏:包含好友、群组、设置等菜单。
* 聊天列表:显示当前在线的好友和群组。
* 聊天内容:展示当前会话的消息。
* 输入框:允许用户输入新消息。
界面代码
以下是界面的基本布局：
```cpp// vc_qt_bubblemsg.uiUI_Vc_Qt_BubbleMsg {
QWidget window;
QToolBar toolBar;
QAction action_add_friend;
QAction action_add_group;
QAction action_settings;
end;
QVBoxLayout layout;
QScrollArea scrollArea;
QWidget scrollAreaWidgetContents;
QVBoxLayout scrollAreaLayout;
QListWidget chatList;
QTextEdit chatContent;
QLineEdit inputBox;
end;
end;
end;
QHBoxLayout buttonLayout;
QPushButton addButton;
QPushButton sendButton;
end;
end;
}
```
界面逻辑
以下是界面的基本逻辑：
```cpp// vc_qt_bubblemsg.cppinclude "vc_qt_bubblemsg.h"
include
include
Vc_Qt_BubbleMsg::Vc_Qt_BubbleMsg(QWidget *parent)
: QMainWindow(parent)
{
setupUi(this);
// 初始化界面 initUI();
}
void Vc_Qt_BubbleMsg::initUI()
{
// 设置顶部导航栏菜单 toolBar->addAction(action_add_friend);
toolBar->addAction(action_add_group);
toolBar->addAction(action_settings);
// 设置聊天列表和内容 chatList->setStyleSheet("QListWidget { background-color: f0f0f0; }");
chatContent->setReadOnly(true);
// 设置输入框 inputBox->setPlaceholderText("请输入新消息");
// 设置按钮布局 addButton->setText("添加好友");
sendButton->setText("发送消息");
}
Vc_Qt_BubbleMsg::~Vc_Qt_BubbleMsg()
{
}
```
功能实现
以下是界面的基本功能：
```cpp// vc_qt_bubblemsg.cppinclude "vc_qt_bubblemsg.h"
include
include
Vc_Qt_BubbleMsg::Vc_Qt_BubbleMsg(QWidget *parent)
: QMainWindow(parent)
{
setupUi(this);
// 初始化界面 initUI();
// 设置事件处理器 connect(addButton, &QPushButton::clicked, this, &Vc_Qt_BubbleMsg::onAddFriendClicked);
connect(sendButton, &QPushButton::clicked, this, &Vc_Qt_BubbleMsg::onSendMessageClicked);
}
void Vc_Qt_BubbleMsg::initUI()
{
// ...
}
void Vc_Qt_BubbleMsg::onAddFriendClicked()
{
// 添加好友逻辑}
void Vc_Qt_BubbleMsg::onSendMessageClicked()
{
// 发送消息逻辑}
```
总结
本次更新展示了一个初步的微信聊天窗口界面，基于Qt技术栈开发。这个版本主要是为了展示基本的UI和功能框架，而不是一个完整的产品。下一步将会专门建立仓库，并且修改界面的显示。
参考内容
* Qt技术栈* 微信聊天窗口界面设计* 基于Qt的GUI开发
