Qt5.8《网络版够级游戏》编写日志之二：界面设计

Qt5.8《网络版够级游戏》编写日志之二：界面设计

 

    说干就干，按照之前的想法，我对服务器和客户端进行了项目创建，并开展了界面搭建，由于还不知道遇到什么问题，基本上想到哪儿做到哪儿，想把界面完成。两个项目分别叫GoGeServer（服务器端）和GoGeClient（客户端）。

1 服务器端界面设计

    服务器端项目创建过程就不细说了，与创建一般的项目过程一样没什么需要特别说明的。看看我设计的界面吧

图一 服务器端界面

    服务器界面比较简单，我简单分了两个区域，一个绿色框中的登陆玩家列表和红色框中服务器信息列表。其中绿色框中登陆玩家列表主要由两个控件组成：一是一个Qlabel标识（采用了属性编辑器中的stytleSheet中渐变设置，让Qlable有点渐变色）；二是一个QTreeWidget控件，用来显示已登陆的玩家列表以及创建的房间列表，这个打算做成类似QQ的好友框模式；红色框中服务器信息列表主要由一个QTabWidget或一些QPushButton组成。其中QtabWidget的第一个页面放置服务器信息显示页面，该页面主要由一个QtextEdit组成，用于显示服务器的一些相关信息，比如用户登录信息、离线信息、服务器的启动关闭、玩家创建、离开、删除房间等信息的显示，另外各玩家间的聊天也可以在这里集中显示；后续页面为房间页面（房间页面需要单独做成类，动态创建添加，这里还未做到，所以只有服务器信息这一个页）用于显示在同一个房间中玩家之间的聊天信息，出牌记录等。其他的QPushButton主要用来的对服务器进行一个控制。

    创建时主界面类我命名为ServerFrame类，界面设计采用Qt自带的界面编辑Design进行了可视化拖拽，然后通过布局让整个界面可以自动伸缩，比较方便。

2客户端界面设计

    客户端分为登陆注册界面和登陆后的主界面。其中登陆注册界面为一个类命名为SloginAndRegister，整个注册和登陆界面由一个QPushButton和一个QtabWidget组成，QPushButton主要为了用来显示一个够级的图片，QtabWidget主要是用来显示登陆和注册界面；登陆后的主界面为一个类，命名为ClientFrame。同样也是用Qt Design设计，并没有用代码自己生成界面。

图二 客户端登陆界面

    登陆游戏Tab页中，主要包含四个QlineEdit和一个QPushButton，分别用来输入服务器IP、服务器端口、玩家姓名和登陆密码，并相应登陆操作。

图三 客户端用户注册界面

    用户注册Tab页中，也是包含四个QlineEdit和一个QPushButton，但是多了一个头像选择QcomboBox下拉框，分别用来输入服务器IP、服务器端口、玩家姓名、登陆密码以及头像选取，并响应注册操作。

    这里考虑到易用性，我还打算为客户端和服务器都写一个专门用来管理配置文件的类，用来记录最近一次玩家登陆的服务器IP、端口、玩家姓名。

图四 客户端登陆后主界面

    登陆后的主界面也比较简洁，毕竟我是自己写着来锻炼自己的，也没那么多艺术脓包，所以就设计成上面那个样子。客户端的主界面仍然分为两个部分，其中绿色框中是登陆玩家列表，用于显示所有登陆在线的玩家；红色框中为一个公开的聊天室以及服务器公告区，主要用于所有玩家在大厅聊天室中群聊用，同时也用来通报服务器一些信息（实际上可能也没什么信息可公告的，服务器关闭也就关闭了）。下面那句“不计后果 拼命探索”是套用喜马拉雅思考盒子的节目口号，只要是觉得服务器公告信息下面没个东西，似乎和左边的聊天发言栏不对称，就加了个这句。

    绿色框中的登陆玩家列表依旧是由一个QLable和一个QTreeWidget组成，用来显示在线玩家，也是要做成QQ那样的模式；

    红色框中是由一个QTabWidget组成，QTabWidget第一个页面是快乐聊天室+服务器公告页面，用来显示在线玩家的聊天信息，信息显示用的QtextEdit控件，信息发送由一个发送对象选择下拉框和一个QlineEdit组成；第二个页面为加入房间后的游戏界面，因为还未想好怎么弄，所以没有做，只有一个空的Tab2在那儿。

3 小结

    基本上主要的界面我考虑的就是这么多了，马上开始实际的编程。在界面搭建中，个人体会用Qt Design使用起来比较方便，就是布局的时候稍微掌握一些调整技巧，就可以将界面弄好，很方便。如果是纯粹用代码来编写布局，那个在写一个控件时，个人感觉比较好用，不过比较麻烦。