聊天项目(18) 聊天界面布局以及可点击按钮的实现

聊天界面整体展示

我们先看下整体的聊天界面,方便以后逐个功能添加
https://cdn.llfc.club/1716523002662.jpg

QT Designer中 ui 设计如下
https://cdn.llfc.club/1716528347175.jpg

将聊天对话框分为几个部分:

1 处为左侧功能切换区域,包括聊天,联系人等。

2 处为搜索区域,可以搜索联系人,聊天记录等, 搜索框后面的按钮是快速拉人创建群聊的功能。

3 处为近期聊天联系列表

4 处为搜索结果列表,包括匹配到的联系人,聊天记录,以及添加联系人的按钮。

5 处为聊天对象名称和头像的显示区域,这里先做简单演示写死。

6 处为聊天记录区域。

7 处为工具栏区域。

8 处为输入区域

9 处为发送按钮区域。

大家可以按照这个布局拖动和修改,达到我的布局效果。

创建ChatDialog

右键项目,选择创建设计师界面类,选择创建QDialog without buttons。对话框的名字为ChatDialog

创建完成后,在之前登录成功的回调里,跳转到这个对话框。在MainWindow里添加槽函数

  1. void MainWindow::SlotSwitchChat()
  2. {
  3. _chat_dlg = new ChatDialog();
  4. _chat_dlg->setWindowFlags(Qt::CustomizeWindowHint|Qt::FramelessWindowHint);
  5. setCentralWidget(_chat_dlg);
  6. _chat_dlg->show();
  7. _login_dlg->hide();
  8. this->setMinimumSize(QSize(1050,900));
  9. this->setMaximumSize(QWIDGETSIZE_MAX, QWIDGETSIZE_MAX);
  10. }

在MainWindow的构造函数中添加信号和槽的链接

  1. //连接创建聊天界面信号
  2. connect(TcpMgr::GetInstance().get(),&TcpMgr::sig_swich_chatdlg, this, &MainWindow::SlotSwitchChat);

并且在TcpMgr中添加信号

  1. void sig_swich_chatdlg();

为了方便测试,我们在MainWindow的构造函数中直接发送sig_switch_chatdlg信号,这样程序运行起来就会直接跳转到聊天界面

ChatDialog ui文件

ui文件的结构可以参考我的源码中的结构,这里我们可以简单看下

https://cdn.llfc.club/1716603750779.jpg

按照这个布局拖动并设置宽高即可,接下来需要设置下qss调整颜色

  1. #side_bar{
  2. background-color:rgb(46,46,46);
  3. }

重写点击按钮

为了实现点击效果,我们继承QPushButton实现按钮的点击效果,包括普通状态,悬浮状态,以及按下状态

  1. class ClickedBtn:public QPushButton
  2. {
  3. Q_OBJECT
  4. public:
  5. ClickedBtn(QWidget * parent = nullptr);
  6. ~ClickedBtn();
  7. void SetState(QString nomal, QString hover, QString press);
  8. protected:
  9. virtual void enterEvent(QEvent *event) override; // 鼠标进入
  10. virtual void leaveEvent(QEvent *event) override;// 鼠标离开
  11. virtual void mousePressEvent(QMouseEvent *event) override; // 鼠标按下
  12. virtual void mouseReleaseEvent(QMouseEvent *event) override; // 鼠标释放
  13. private:
  14. QString _normal;
  15. QString _hover;
  16. QString _press;
  17. };

接下来实现其按下,离开进入等资源加载,并且重写这些事件

  1. ClickedBtn::ClickedBtn(QWidget *parent):QPushButton (parent)
  2. {
  3. setCursor(Qt::PointingHandCursor); // 设置光标为小手
  4. }
  5. ClickedBtn::~ClickedBtn(){
  6. }
  7. void ClickedBtn::SetState(QString normal, QString hover, QString press)
  8. {
  9. _hover = hover;
  10. _normal = normal;
  11. _press = press;
  12. setProperty("state",normal);
  13. repolish(this);
  14. update();
  15. }
  16. void ClickedBtn::enterEvent(QEvent *event)
  17. {
  18. setProperty("state",_hover);
  19. repolish(this);
  20. update();
  21. QPushButton::enterEvent(event);
  22. }
  23. void ClickedBtn::mousePressEvent(QMouseEvent *event)
  24. {
  25. setProperty("state",_press);
  26. repolish(this);
  27. update();
  28. QPushButton::mousePressEvent(event);
  29. }
  30. void ClickedBtn::mouseReleaseEvent(QMouseEvent *event)
  31. {
  32. setProperty("state",_hover);
  33. repolish(this);
  34. update();
  35. QPushButton::mouseReleaseEvent(event);
  36. }

回到chatdialog.ui文件,将add_btn升级为ClickedBtn

接着在qss文件中添加样式

  1. #add_btn[state='normal']{
  2. border-image: url(:/res/add_friend_normal.png);
  3. }
  4. #add_btn[state='hover']{
  5. border-image: url(:/res/add_friend_hover.png);
  6. }
  7. #add_btn[state='press']{
  8. border-image: url(:/res/add_friend_hover.png);
  9. }

add_btn的样式一定要显示设置一下三个样式,所以我们回到ChatDialog的构造函数中设置样式

  1. ui->add_btn->SetState("normal","hover","press");

再次启动运行,可以看到添加群组的按钮样式和sidebar的样式生效了。

为了美观显示,我们去mainwindow.ui中移除状态栏和菜单栏。

热门评论

热门文章

  1. Linux环境搭建和编码

    喜欢(594) 浏览(6419)
  2. windows环境搭建和vscode配置

    喜欢(587) 浏览(1801)
  3. slice介绍和使用

    喜欢(521) 浏览(1880)
  4. 解密定时器的实现细节

    喜欢(566) 浏览(2125)
  5. C++ 类的继承封装和多态

    喜欢(588) 浏览(2960)

最新评论

  1. 泛型算法的定制操作 secondtonone1:lambda和bind是C11新增的利器,善于利用这两个机制可以极大地提升编程安全性和效率。
  2. C++ 虚函数表原理和类成员内存分布 WangQi888888:class Test{ int m; int b; }中b成员是int,为什么在内存中只占了1个字节。不应该是4个字节吗?是不是int应该改为char。这样的话就会符合图上说明的情况
  3. 类和对象 陈宇航:支持!!!!
  4. 解决博客回复区被脚本注入的问题 secondtonone1:走到现在我忽然明白一个道理,无论工作也好生活也罢,最重要的是开心,即使一份安稳的工作不能给我带来事业上的积累也要合理的舍弃,所以我还是想去做喜欢的方向。
  5. slice介绍和使用 恋恋风辰:切片作为引用类型极大的提高了数据传递的效率和性能,但也要注意切片的浅拷贝隐患,算是一把双刃剑,这世间的常态就是在两极之间寻求一种稳定。

个人公众号

个人微信