QT实现完整TIM登录框界面样式

  • 先上实现TIM登录框效果图
  • 此图为实现的TIM效果图:
    QT实现完整TIM登录框界面样式_第1张图片
  • 此图为TIM实际登录框样式
    QT实现完整TIM登录框界面样式_第2张图片
  • 可以看出,上述实现的 还是基本上实现完整,还有一点小的细节没实现好。
  • 接下来是实现的过程的讲解
  • 首先创建一个QMainWindow 项目
    QT实现完整TIM登录框界面样式_第3张图片
    这边只要一路往下按就创建成功,
    然后双击Form里面的ui文件,进入QTDesigner界面
    QT实现完整TIM登录框界面样式_第4张图片
  • 然后后面 就是添加按钮等控件,按钮控件可以通过直接拖动的形式添加
    QT实现完整TIM登录框界面样式_第5张图片
  • 简单的添加之后,显然不能实现,因为具体的样式还需要调整,样式方面,可以通过qss语法 进行修改,然后具体的颜色 可以通过微信自带的截图 获取rgb值,进行更改,还有一方面,就是qmainwindow自带的标题栏 需要去除,直接在YLogin.cpp添加该句,即可去除
  this->setWindowFlags(Qt::FramelessWindowHint);//去掉标题栏

QT实现完整TIM登录框界面样式_第6张图片

  • 去除正常标题栏之后,正常来说 会出现运行文件无法移动的情况。
    这个需要重写QMainWindowmousePressEvent的相关方法
    QT实现完整TIM登录框界面样式_第7张图片

  • 然后的话,就可以通过基本的qss样式更改 实现简单的TIM界面。
    效果如上,但是考虑到大家上翻 比较麻烦 ,这边进行贴图
    QT实现完整TIM登录框界面样式_第8张图片

  • 补充,现在也实现了点击显示账号的功能

  • 此图为个人程序作品
    QT实现完整TIM登录框界面样式_第9张图片

  • 此图为TIM实际效果,基本做到1:1还原
    QT实现完整TIM登录框界面样式_第10张图片

  • 实现了提醒重复登录功能

  • 此图为个人程序作品

  • 此图为tim实际效果

QT实现完整TIM登录框界面样式_第11张图片

  • 实现了添加账号的效果

  • 此图为个人程序作品
    QT实现完整TIM登录框界面样式_第12张图片

  • 此图为TIM实际效果

QT实现完整TIM登录框界面样式_第13张图片

  • 实例的代码下载地址在此:
    https://github.com/huifeng-kooboo/QTDemo.git

  • 如果对大家有帮助的情况下,可以请博主喝杯奶茶啥的

  • 也可以加微信一起探讨qt相关只是

  • QT实现完整TIM登录框界面样式_第14张图片

你可能感兴趣的:(C++)