1.4：聊天框体实现一(整体结构定义、侧边栏)

作者：小傅哥
博客：https://bugstack.cn (opens new window)

沉淀、分享、成长，让自己和他人都能有所收获！

一、前言

在前面章节我们实现了登陆窗体开发以及窗体需要的事件和接口，最终我们演示了运行效果。从上面简单的例子，我们可以学一个简单窗体的开发和框架结构的定义。

那么接下来我们开始开发聊天窗体，相对于登陆窗体来说，聊天窗体的内容会比较多，同时也会相对复杂一些。因此我们会分章节的逐步来实现这些窗体以及事件和接口功能。在本篇文章中我们会主要讲解聊天框体的搭建以及侧边栏 UI 开发。

二、框体分析

为了更加直观的看到我们要实现的内容是如何一步步完成的，现在将 UI 框体进行拆解，如下；

• 首先是我们整个聊天主窗体的定义，是一块空白面板，并去掉默认的边框按钮 (最小化、退出等)
• 之后是我们左侧边栏，我们称之为条形 Bar，功能区域的实现。
• 最后添加窗体事件，当点击按钮时变换 内容面板 中的填充信息。