QQ 登录界面布局

转载 2013年12月02日 09:13:03
 

QQ 登录界面布局

分类: Qt 148人阅读 评论(0) 收藏 举报

我理解的QQ登录框是一个外层对话框QDialog里面包含两层QWidget: 背景层和响应层。

QQ登录框有三种背景:Flash动画、画卷•中国和背景图片(早期QQ)。

响应层包括四个界面:登录界面、添加QQ账号、多账户登录界面和管家安全登录界面。

如下所示:

实现思路及分工:
1、 外层对话框LoginDialog(继承自QDialog),负责对话框的拖动,关闭、最小化[ToolWidget]、圆角和阴影。
2、 背景层BackgroundWidget:使用策略模式实现,根据不同参数创建不同的背景[FlashWidget、PictureScrollWidget、ImageWidget]。
3、 响应层QStackedWidget, 使用QStackedWidget进行不同界面之间的切换
[AddQQWidget、MultiAccountLoginWidget、LoginWidget、SafeLoginWidget]。

 

UML图设计如下:

 

编程规范约定(约定并没有强制):

复杂的界面类,至少使用如下三个函数,使类结构清晰:

 

  1. public:  
  2. virtual void retranslateUI(); //翻译语言  
  3. private:  
  4.     void createUI(); //创建UI中的元素  
  5.     void setUILayout(); //布局  
  6.     void setConnect(); //设置信号槽  


构造函数类似:

  1. AddQQWidget::AddQQWidget(QWidget *parent) :  
  2.     QWidget(parent)  
  3. {  
  4.     if(parent)  
  5.         this->setFixedSize(parent->size());  
  6.   
  7.     createUI();  
  8.     setUILayout();  
  9.     setConnect();  
  10.   
  11.     retranslateUI();  
  12. }  


 

 

举报

相关文章推荐

QQ登录界面布局

在网上看了一些关于QQ布局的实例,经过自己的研究学习整理,特公布代码如下,主要就是一个布局文件;qqlogin.xml: <LinearLayout xmlns:android="http://sch...

react-native仿qq登录界面布局

使用react-native中的TextInput、Text、Image三个组件,编写的一个简单的仿照qq登录的界面。 截图如下: 还挺像的哈,代码都写在了index.android.js这个...
  • cjs68
  • cjs68
  • 2016-12-14 15:31
  • 191

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

相对布局(RelativeLayout)写的QQ登录界面

RelativeLayout可以设置某一个视图相对于其他视图的位置,这些位置可以包括上下左右等。 android:layout_below 在某个元素(控件的下方) android:layou...

DDuilib进阶-设计QQ新版界面布局【四】

待编写... 一、登录界面

【android】软键盘 - 仿 qq/微信 聊天界面布局

目录 导读 软键盘的弹出通常会将部分布局顶出屏幕外,或者直接覆盖在屏幕上的效果,或让人觉得很突兀,或无法时时刻刻看到底部输入框的内容;无法直接做出像 qq/微信 这样人性化的效
  • natloc
  • natloc
  • 2016-03-08 01:10
  • 1967

android-仿QQ界面布局

仿QQ界面布局 老规矩。右键取得显示不出来的图片地址,利用下载工具下载这个图片。后缀改为rar即可得到源代码项目。 <RelativeLayo...

腾讯WSD:手机QQ浏览器界面布局设计心得

经过几个月的时间和大家的努力,手机QQ浏览器(android版)从 2.0 陆续更新到的 2.6。在经历了设计的千回百转和架构的不断尝试后,终于有了个新面貌,使用体验也比之前版本有了较大提升。不过,这...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)