Chap15-ClientUI

Chap15-ClientUI

与chap14相隔一段时间，在实现客户端qt的ui界面。此处就是看qt的基础和实现了，并没有着重的分析和记录。只是为了覆盖流程，再次作简单的整体分析。

在之前完成qt登陆注册界面之后，我们通过登陆进入主界面MainInterface.下面是主界面的布局：

首先整体是一个HLayout,包括左侧的TopTitle,FriendList,SideBar.右侧的ChatArea.在编写过程由于代码量较大，为了容易分辨，我们把整个主界面成为MainScreen,图中的每个部分称为xxxPart,比如ChatPart,TopTitlePart.对于更加细分的部分，我们放在一个文件夹中，比如实际上ChatPart还会分为ChatArea和ChatTopArea两个部分，ChatArea还会分为MessageArea和InputArea两部分。

• TopTilePart主要是放置logo,名称等简单组件。
• SideBarPart放置按钮，用于管理FriendList的内容。
• FriendListPart根据左侧按钮的点击存放最近的消息或者好友列表等一行行内容。
• ChatPart主要用于聊天部分
  • ChatTopArea主要是有状态管理,好友添加,头像展示等功能
  • ChatArea用于聊天
    • InputArea用于输入，比如QTextEdit进行文本输入，和上侧的按钮栏进行表情，图片，视频等的发送
    • MessageArea用于展示消息列表。和FriendList一样使用QListView,手动重写delegate和model实现自定义展示。

在此贴出.h文件的结构用于梳理：

目前已经实现的效果如下：

可以修改自身的状态，以及添加好友界面的展示

发送文本，emoji,图片，视频，音频，文件。

同时能够选择某一条消息，右键可以选择，复制，本地删除等。

左键双击可以对对应的文件格式进行展示。