Qt 之 模仿 QQ登陆界面——功能篇（一）

最新推荐文章于 2024-03-17 21:52:16 发布
最新推荐文章于 2024-03-17 21:52:16 发布
阅读量1.7w 收藏 101
点赞数 18
分类专栏： Qt 之 实现QQ窗口界面 Qt之控件讲解篇 文章标签： qt qq 登录界面 QComboBox QMenu
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goforwardtostep/article/details/54025626
版权

一、简述

今天是2017年第一篇技术文章，12月末事情太多，一直没来得及更新博客。今天继 Qt 之 模仿 QQ登陆界面——样式篇 这一篇 来简单地看一下对登录界面做的一些功能，主要是登录用户下拉列表和用户登录状态的切换。

效果图：

登录用户下拉列表

这里写图片描述

用户登录状态

这里写图片描述

二、代码之路

accountitem.h


                

                
                
        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  前行中的小猪
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    18
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    101
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  16
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
模仿QQ登录窗口（Qt实例）

				
			

			

				

					07-20
				

			

		

		

			
				
利用Qt 实现了QQ的登录界面，基本上实现了QQ的登陆界面全部效果，外加了QQ登录界面的旋转效果。虽不说100%相似，那也有99.99%相似了哈O(∩_∩)O。 详情见博客：http://blog.csdn.net/goforwardtostep/article/details/55224578

			
		

	



                

              
                



	

		

			

				
					
仿QQ登录界面的QComboBox

				
			

			

				

					迎风的舵手
				

				

					07-21
					
					4894
					
				

			

		

		

			
				
转自: http://blog.sina.com.cn/s/blog_a6fb6cc90101ed6n.html

			
		

	



                


  
              

                


	

		

			

				
					
QT界面的登录界面以及注册界面的构建以及连接

					
最新发布

				
			

			

				

					weixin_62533671的博客
				

				

					03-17
					
					868
					
				

			

		

		

			
				
我的登录界面是这样设计的，可以供大家参考，先使用qt designer将这个图片的样子建立好。

			
		

	





	

		

			

				
					
QT day2模仿QQ登录界面

				
			

			

				

					weixin_45544618的博客
				

				

					04-26
					
					96
					
				

			

		

		

			
				
每日学习

			
		

	



		

			
		



	

		

			

				
					
QComboBox自定义（一）--类似QQ登陆界面的下拉框

				
			

			

				

					slowlytalk
				

				

					07-27
					
					1780
					
				

			

		

		

			
				
刚学Qt的时候，初步经历的第一个学习项目基本上都是LANQQ，初识时，不懂QSS，不懂布局，绘制界面最简单的方式成了使用designer拉满整个界面的控件，或者使用代码写了一些很蹩脚的布局。也是很羡慕别人哪些精致的界面，印象很深的是QQ登陆界面的下来列表，下面，我们简单的来介绍下怎样做到和QQ登陆界面一样的下拉列表。
先看一下效果：

没有做qss的美化，简单的实现了下功能，如果需要在显示名称的部分也需要显示头像的话，也是可以，这个在下一节自定义控件的时候再看。
简单的改造了一下上次的ListTemplat

			
		

	





	

		

			

				
					
QT从入门到实战：实现模仿QQ通讯

				
			

			

				

					Nuyoah的博客
				

				

					04-28
					
					490
					
				

			

		

		

			
				
通过qt实现QQ通信的功能

			
		

	





	

		

			

				
					
Qt 之 模仿 QQ登陆界面——样式篇

				
			

			

				

					天道酬勤
				

				

					11-14
					
					2082
					
				

			

		

		

			
				
一、简述

今天晚上花了半天时间从QQ登录界面抠了些图，顺便加了点样式基本上实现了QQ的登陆界面全部效果。虽不说100%相似，那也有99.99%相似了哈O(∩_∩)O。

QQ好像从去年开始，登录界面有了一个3D动态效果，要实现这个也不难，直接使用GIF制作工具，录制动态效果生成GIF图，然后用QMovie加载Gif图，QLabel显示即可。

效果图：







可以从上面的效果图看出，整个...

			
		

	





	

		

			

				
					
Qt小程序之QQ登录窗口输入框控件

				
			

			

				

					前行之路还需前行
				

				

					11-20
					
					3094
					
				

			

		

		

			
				
一、简述
在前面的文章里为大家展示了用Qt实现的QQ登录界面以及QQ窗口的右键菜单控件，（Qt 实现 QQ 9.0版 自定义菜单控件、以及Qt 实现 QQ 9.0 新版登录窗口），有兴趣的小伙伴可以看下相关的文章，今天就把QQ登录界面的输入框单独拿出来分享一下。
单独看QQ的输入框其实也就是一个LineEdit，但是其实不是那么简单，用Qt要实现一样的效果需要加一些样式，贴图，布局等，还有一点就是...

			
		

	





	

		

			

				
					
QComboBox类及示例

				
			

			

				

					2301_79503228的博客
				

				

					09-15
					
					161
					
				

			

		

		

			
				
是Qt中的一个组件类，用于创建。它提供了一个下拉列表供用户选择，也可以直接当作一个用作输入。

			
		

	





	

		

			

				
					
Qt之自定义用户名输入框 QLineEdit+QLabel+QComboBox 带输入自动提示补全和历史登录用户记忆

				
			

			

				

					weixin_40425059的博客
				

				

					09-20
					
					3608
					
				

			

		

		

			
				
前几天美工给设计出了一个用户登录界面，其中用户名输入框样式如下图：

左侧的“用户名”三个字为固定文字，中间可输入用户名，点击右侧的倒三角，可以显示下拉框，下拉框中显示的是历史登录成功的用户名，且在输入用户名时，若下拉框中有完整的用户名时进行补全提示。
本人采用的是最外层为QLineEdit控件，在QLineEdit控件中填充水平布局器，布局器中依次放入QLabel用于填写“用户名”固定数据，QC...

			
		

	





	

		

			

				
					
Qt 之 模仿 QQ登陆界面下载

				
			

			

				

					01-15
				

			

		

		

			
				
利用Qt 实现了QQ的登录界面，从QQ登录界面抠了些图，加了点样式基本上实现了QQ的登陆界面全部效果。虽不说100%相似，那也有99.99%相似了哈O(∩_∩)O。 详情见博客：...

			
		

	





	

		

			

				
					
QT 5 模仿QQ登陆界面

				
			

			

				

					10-10
				

			

		

		

			
				
从QQ登录界面抠了些图,顺便加了点样式基本上实现了QQ的登陆界面全部效果。虽不说100%相似，那也有99.99%相似了,整个登录界面的效果都已实现（或者说点击状态按钮没有弹出菜单选择登录状态，这个我觉得是功能部分，此...

			
		

	





	

		

			

				
					
Qt之模仿QQ主面板界面

				
			

			

				

					06-24
				

			

		

		

			
				
Qt之模仿QQ主面板界面 具体详情请查看雨田哥博客： https://blog.csdn.net/ly305750665/article/details/79727397

			
		

	





	

		

			

				
					
Qt 之 自定义提示信息框—QQ风格

					
热门推荐

				
			

			

				

					前行之路还需前行
				

				

					12-20
					
					1万+
					
				

			

		

		

			
				
一、简述在 Qt 之 自定义提示信息框—迅雷风格 这篇文章中讲述了如何实现迅雷风格的自定义提示框。那么在这一篇中我们就讲述一下如何实现QQ风格的提示框。整体代码与Qt 之 自定义提示信息框—迅雷风格 中的代码类似，主要是界面样式上的不同，下面先看一下效果图。二、代码之路看代码之前需要看一下 Qt 之 自定义窗口标题栏 这一篇文章，因为这里用到了这篇文章中写到的自定义标题栏。这里新建任务窗口类MyMe

			
		

	





	

		

			

				
					
Qt 之 模仿 QQ登陆界面——旋转窗口篇

				
			

			

				

					前行之路还需前行
				

				

					02-15
					
					1万+
					
				

			

		

		

			
				
一、简述今天是新的一年第一篇博客，有大半个月没有更新博客了。我想是时候，打开电脑、拿起键盘、开始在我的代码之路上披荆斩棘，斩杀恶龙。今天就继续来分享QQ登录界面的那些事。QQ登录界面的标题栏有一个小三角的按钮，一般情况下，大家可能并不会点击这个按钮，因为正常情况下大家登录QQ都不需要进行网络设置，只有在网络有限制的情况下，我们需要设置一些代理来登录QQ。当我们点击这个小三角按钮，我们会发现QQ的有一

			
		

	





	

		

			

				
					
Qt 之 QQ系统表情（一）

				
			

			

				

					前行之路还需前行
				

				

					08-30
					
					6373
					
				

			

		

		

			
				
在走上Qt之路后，对QQ的界面便情有独钟，由衷感叹：一个字——美 
两个字——很美 
三个字——非常美 
四个字——真TM美说实在QQ的界面做的很精、致，毕竟积累了十几年的功力。但是也有不足的地方，任何事物都不是十全十美的，最重要的是要做的尽善尽美。好了话不多说，代码走起。这次主要是对QQ聊天窗口的表情框的简单实现，下篇中将进一步展开。先看看QQ的小表情框： 
当我们将鼠标慢慢放在这个表情按钮上时会

			
		

	





	

		

			

				
					
Qt 之 QQ系统表情—实现动态显示效果

				
			

			

				

					前行之路还需前行
				

				

					09-26
					
					5864
					
				

			

		

		

			
				
简述在Qt 之 QQ系统表情（五） 中 我们实现了自定义系统表情窗口，这一篇将简单介绍如何实现QQ聊天界面中小表情窗口切换至正常表情窗口的动画效果。先看看QQ的效果：
  当鼠标悬浮在表情按钮之上显示小表情窗口，点击动态显示正常表情窗口，再点击隐藏窗口。表面上看起来这几个动作很简单，但是要想控制好着实不易，下面直接上代码。
代码之路//显示小窗口
void EmotionWindow::showSm

			
		

	





	

		

			

				
					
基于Qt的聊天软件设计实现——高仿QQUI设计

				
			

			

				

					05-23
				

			

		

		

			
				
Qt是一个跨平台的C++应用程序开发框架，它提供了丰富的GUI界面库和网络库等，非常适合开发聊天软件。在本文中，我们将介绍如何使用Qt实现一个高仿QQUI设计的聊天软件。

第一步：UI设计

QQUI是一种基于Qt的UI设计风格，它的特点是简洁、美观、易用。我们可以借鉴一下QQUI的设计思路，设计出我们的聊天软件UI。

首先，我们需要准备好UI所需的资源文件，包括图片、字体等。然后，在Qt Creator中创建一个新的“Qt Widgets Application”项目，选择“Dialog with Buttons Bottom”模板。在“Designer”中，我们可以使用“Widget Box”中的控件来设计UI界面，例如：Label、LineEdit、PushButton、TextBrowser等。我们可以使用样式表来设置控件的属性和样式，例如：颜色、字体、边框等。

第二步：网络通信

在聊天软件中，网络通信是必不可少的。我们可以使用Qt提供的网络库来实现客户端和服务器之间的通信。在本例中，我们将使用TCP协议来进行通信。

首先，我们需要在客户端中创建一个QTcpSocket对象，通过调用connectToHost()函数来连接服务器。连接成功后，我们可以使用write()函数向服务器发送数据，使用read()函数接收服务器发送的数据。当客户端需要关闭连接时，可以通过调用disconnectFromHost()函数来断开连接。

在服务器端，我们需要创建一个QTcpServer对象，通过调用listen()函数来监听客户端的连接请求。当客户端连接成功后，服务器会自动创建一个QTcpSocket对象与客户端进行通信。我们可以使用QTcpSocket对象的readyRead()信号来接收客户端发送的数据，使用write()函数向客户端发送数据。当服务器需要关闭连接时，可以通过调用close()函数来关闭连接。

第三步：消息处理

在聊天软件中，消息的处理非常重要。我们需要对接收到的消息进行解析，并根据消息类型来执行相应的操作。例如：当接收到一条文本消息时，需要在聊天窗口中显示该消息；当接收到一条图片消息时，需要在聊天窗口中显示该图片。

在本例中，我们将使用JSON格式来传递消息。每个消息都包含一个消息类型和消息内容。我们可以使用QJsonDocument和QJsonObject类来解析JSON格式的消息。

第四步：数据库存储

在聊天软件中，数据库存储可以帮助我们保存聊天记录、用户信息等。我们可以使用Qt提供的SQL库来实现数据库存储。

在本例中，我们将使用SQLite数据库来存储聊天记录。首先，我们需要在Qt Creator中创建一个新的SQLite数据库，并创建一个表来存储聊天记录。然后，我们可以使用QSqlDatabase类来连接数据库，使用QSqlQuery类来执行SQL语句。当接收到一条消息时，我们可以将消息内容存储到数据库中。

第五步：实现功能

在完成了以上四步之后，我们就可以开始实现聊天软件的各种功能了。例如：登录、注册、添加好友、发送消息等。

在本例中，我们将实现以下功能：

1. 登录和注册：用户需要输入用户名和密码进行登录或注册。

2. 添加好友：用户可以通过输入好友的用户名来添加好友。

3. 聊天窗口：用户可以选择好友进行聊天，发送和接收消息。

4. 聊天记录：聊天记录将保存在数据库中，用户可以查看历史聊天记录。

5. 用户信息：用户可以修改自己的用户名和密码。

第六步：优化和测试

在完成了功能的实现之后，我们需要对程序进行优化和测试。例如：优化界面的交互体验、提高程序的性能、进行功能测试和兼容性测试等。

最后，我们可以将程序打包成可执行文件，发布到用户手中。

总结

通过以上步骤，我们就可以使用Qt实现一个高仿QQUI设计的聊天软件了。Qt提供了丰富的GUI界面库和网络库等，可以帮助我们快速地开发跨平台的应用程序。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 16

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值