PyQt模拟微信聊天页面开发 |
您所在的位置：网站首页 › 微信聊天记录模板怎么做 › PyQt模拟微信聊天页面开发 |
PyQt模拟微信聊天页面开发
|
一、引述
网上关于Qt模拟微信、QQ的页面开发的多如牛毛，但C++本身来说逻辑上难上手，对只会Python的小伙伴来说太痛苦了。 今天就为大家开个场（下节更精彩），众所周知，要想模拟微信、QQ等这种聊天工具，最重要之一就是聊天框里的气泡问题。 二、思路1、UI设计 UI的设计风格与微信页面设计大体相似，主要分成了5大部分： 导航栏，消息、用户等点击选择消息栏框，显示好友消息列表聊天页面，显示气泡消息文本框，输入聊天信息聊天工具框，表情、文件等工具栏
目前采用的方式单独使用一个QWidget类，重写paintEvent事件，主要有三个部分组成： 头像气泡框文本框其中，气泡框大小、文本框大小决定于文本的大小（包括图片的大小） 在这里信息输入框需满足以下要求： 普通文本，部件的基本功能，无需实现本地图片，实现复制粘贴的需求网络图片的粘贴，html富文本的格式本地文件的拖拐（copy）表情包，与图片类似
暂时以傻瓜式的服务器来实现聊天信息的发送和接受。 中间后端服务器service实现，登录以TCP连接方式进行登录。各客户端为Client，发送信息时，以UDP方式发送至中转站服务器，服务器再转发至对方。 三、气泡框思路我们应该知道在聊天框里，每一天聊天记录都是一个item，这个item里包含了头像和信息这两部分内容。 解决这个难题的方法之一就是使用QPainter来进行画图，然后封装成一个QWidget作为一个item。 而聊天框架则使用QListWidget，每当点击发送按钮，触发添加一个item事件。 思路是这样，但实现起来比较难，为此我从CSDN里找到了一位大佬的推文，虽说是C++的Qt写的，但重写为python，问题不大。 首先，我们先写一个气泡类，重写paintEvent事件，并且在类中自定义了消息文本变量data。 window_height = 10 begin_width_spacing = 20 begin_height_spacing = 16 icon_width = 40 icon_height = 40 text_width_spacing = 12 text_height_spacing = 12 triangle_width = 6 triangle_height = 10 triangle_height_spacing = 10 text_min_width = 0 min_width = 0 text_max_width = 0 real_width = 0 text_height = 0 class MyWidget(QtWidgets.QWidget): def __init__(self, parent=None, data='',type_mess = 0): super(MyWidget, self).__init__(parent) self.setObjectName('myWidget') self.user_chat_content = data # 重写paintEvent 否则不能使用样式表定义外观 def paintEvent(self, event): self.init_data() # 获取文本长度、气泡框架问题一个气泡的大小决定于文本的长度（自动换行），因此呢，我们应该先定义font的类型，它的字体和大小。 def init_data(self): font = QtGui.QFont() font.setFamily("实体") font.setPointSize(12) metrics = QFontMetrics(font) global text_min_width, min_width,text_max_width,real_width, text_height, window_height if metrics.width("A") * 2 + begin_height_spacing * 1.5 > text_width_spacing: text_min_width = begin_height_spacing * 1.5 - text_width_spacing else: text_min_width = 0 min_width = begin_width_spacing + icon_width + triangle_width + text_width_spacing + text_width_spacing + icon_width + begin_width_spacing if self.width()>跳转
|
2、气泡消息绘画
3、富文本框（信息输入框）的实现
4、服务器实现【本文地址】