QML与C++交互:登陆界面设计
QML与C++交互:登陆界面设计
本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明.
环境：
主机:WIN7
开发环境:Qt5.2.1
说明:
QML设计前台界面,C++后台负责逻辑
效果图:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamRoOTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamRoOTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
源码:
前台qml文件
login.qml
/*********************************************************************
* 登陆界面qml文件
* (c)copyright 2014,jdh
* All Right Reserved
*新建日期:2014/4/29 by jdh
*改动日期:2014/4/30 by jdh
*改动日期:2014/5/4 by jdh
*改动日期:2014/5/5 by jdh
**********************************************************************/ import QtQuick 2.0
import "content"
import Login_Gui 1.0 Rectangle
{
id: login
width: 320; height: 512
SystemPalette { id: activePalette } //C++组件:用户界面
Login_Gui
{
id:login_gui
onSig_login_result:
{
//关闭登陆动画
load_gif.opacity = 0 //依据登陆结果处理
switch (result)
{
//登陆成功
case 0:
message.text = "登陆成功"
message.opacity = 1
break;
//无此username
case 1:
message.text = "登陆失败:无此username"
message.opacity = 1
break;
//password错误
case 2:
message.text = "登陆失败:password错误"
message.opacity = 1
break;
//达到最大登陆次数
case 3:
message.text = "登陆失败:达到最大登陆次数"
message.opacity = 1
break;
}
}
} //背景图片
Image
{
id: background
anchors { top: parent.top; bottom: parent.bottom }
anchors.fill: parent
source: "pics/pic1.png"
fillMode: Image.PreserveAspectCrop
} //消息框
Message
{
id: message
font_size: login.height * 0.03
anchors {centerIn: parent}
opacity: 0
} //登陆动画
AnimatedImage
{
id: load_gif; source: "pics/load.gif"
anchors {horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter}
z: 100
opacity: 0
} //顶栏
Item
{
id: top_bar
width: login.width; height: login.height * 0.06
anchors.top: parent.top Text
{
id: title
anchors { top: parent.top; horizontalCenter: parent.horizontalCenter }
//text: "登陆"
text: "登陆"
font.bold: true
font.pointSize: login.height * 0.06 * 0.4
color: "dark red"
}
} //空白栏
Item
{
id: space1
width: login.width; height: login.height * 0.1
anchors.top: top_bar.bottom
} //登陆框
Rectangle
{
id: rect1
width: login.width * 0.8; height: login.height * 0.3
anchors { top: space1.bottom; horizontalCenter: parent.horizontalCenter }
border.color: "#707070"
color: "transparent"
radius: 8 Row
{
spacing: rect1.width * 0.05 Item
{
width: rect1.width * 0.05; height: rect1.height
} Column
{
spacing: rect1.height * 0.025 Item
{
width: rect1.width * 0.8; height: rect1.height * 0.05
} LineInput
{
id: txt_user_id
width: rect1.width * 0.8; height: rect1.height * 0.2
font_size:height * 0.7
//anchors {horizontalCenter: rect1.horizontalCenter; top: rect1.top; topMargin: 8}
hint: "请输入用户号"
text:login_gui.user_id
} LineInput
{
id: txt_password
width: rect1.width * 0.8; height: rect1.height * 0.2
font_size:height * 0.7
//anchors {horizontalCenter: rect1.horizontalCenter; bottom: btn_login.top; bottomMargin: rect1.height * 0.1}
hint: "请输入password"
text:login_gui.password
} Row
{
spacing: rect1.width * 0.1
Button
{
id: btn_login
width: rect1.width * 0.35; height: rect1.height * 0.2
//anchors { left: rect1.left; leftMargin: 28; bottom: rect1.bottom; bottomMargin: 8 }
text: "登陆"
onClicked: login_req()
} Button
{
id: btn_quit
width: rect1.width * 0.35; height: rect1.height * 0.2
//anchors { right: rect1.right; rightMargin: 28; bottom: rect1.bottom; bottomMargin: 8 }
text: "退出"
onClicked:
{
Qt.quit();
}
}
} Row
{
spacing: rect1.width * 0.1 CheckBox
{
id: check1
width: rect1.width * 0.35; height: rect1.height * 0.2
//anchors { left: rect1.left; top: rect1.bottom }
caption: "记住password"
selected: login_gui.flag_remember
} CheckBox
{
id: check2
width: rect1.width * 0.35; height: rect1.height * 0.2
//anchors { right: rect1.right; top: rect1.bottom }
caption: "自己主动登陆"
selected: login_gui.flag_auto
}
}
}
}
} //android自带键处理
FocusScope
{
focus: true Keys.onReleased:
{
if (event.key == Qt.Key_Back)
{
console.log("qml login quit")
login.sig_btn_quit()
}
}
} //登陆请求函数
function login_req()
{
//推断username是否有效
if (txt_user_id.text == "")
{
message.text = "请输入username"
message.opacity = 1
return
} //推断password是否有效
if (txt_password.text == "")
{
message.text = "请输入password"
message.opacity = 1
return
} //显示登陆动画
load_gif.opacity = 1 //登陆请求
login_gui.user_id = txt_user_id.text
login_gui.password = txt_password.text
login_gui.flag_remember = check1.selected
login_gui.flag_auto = check2.selected
login_gui.slot_login_req()
} // //信号槽绑定
// Component.onCompleted:
// {
// login_gui.sig_user_id_changed.connect(login_gui.slot_btn_login)
// }
}
后台C++代码
main.c
/*********************************************************************
* 主文件
* (c)copyright 2014,jdh
* All Right Reserved
*新建日期:2014/1/27 by jdh
*改动日期:2014/1/28 by jdh
*改动日期:2014/2/4 by jdh
*改动日期:2014/2/18 by jdh
*改动日期:2014/2/27 by jdh
*改动日期:2014/2/28 by jdh
*改动日期:2014/3/1 by jdh
*改动日期:2014/4/10 by jdh
*改动日期:2014/5/4 by jdh
**********************************************************************/ #include "world.h"
#include "main_gui.h"
#include "login_gui.h"
#include "light_gui.h"
#include "heart_beat.h"
#include "net.h"
#include "data_sync_center.h"
#include "set_ctrl_state.h" int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv); //注冊组件到QML
qmlRegisterType<Login_Gui>("Login_Gui", 1, 0, "Login_Gui"); QtQuick2ApplicationViewer viewer;
viewer.setMainQmlFile(QStringLiteral("qml/SH_User/login.qml"));
viewer.showExpanded(); return app.exec();
}
login_gui.h
/*********************************************************************
* 登陆界面模块头文件
* (c)copyright 2014,jdh
* All Right Reserved
*新建日期:2014/1/29 by jdh
*改动日期:2014/2/1 by jdh
*改动日期:2014/2/18 by jdh
*改动日期:2014/3/18 by jdh
*改动日期:2014/5/4 by jdh
*改动日期:2014/5/5 by jdh
*改动日期:2014/5/13 by jdh
**********************************************************************/ #ifndef LOGIN_GUI_H
#define LOGIN_GUI_H /*********************************************************************
* 头文件
**********************************************************************/ #include "world.h" /*********************************************************************
* 宏定义
**********************************************************************/ /*********************************************************************
* 登录间隔
*单位:ms
**********************************************************************/ #define INTERVAL_LOGIN 500 /*********************************************************************
* 最大登录次数
**********************************************************************/ #define NUM_LOGIN 5 /*********************************************************************
* 数据结构
**********************************************************************/ /*********************************************************************
* 登录界面类
**********************************************************************/ class Login_Gui : public QObject
{
Q_OBJECT //属性:username
Q_PROPERTY(QString user_id READ user_id WRITE set_user_id NOTIFY sig_user_id_changed)
//属性:password
Q_PROPERTY(QString password READ password WRITE set_password NOTIFY sig_password_changed)
//属性:记住password标志
Q_PROPERTY(bool flag_remember READ flag_remember \
WRITE set_flag_remember NOTIFY sig_flag_remember_changed)
//属性:自己主动登录标志
Q_PROPERTY(bool flag_auto READ flag_auto \
WRITE set_flag_auto NOTIFY sig_flag_auto_changed) public: /*********************************************************************
* 函数
**********************************************************************/ /*********************************************************************
* 初始化函数
**********************************************************************/ Login_Gui(); /*********************************************************************
* 解构函数
**********************************************************************/ ~Login_Gui(); /*********************************************************************
* 属性读取:用户号
**********************************************************************/ QString user_id(); /*********************************************************************
* 属性写入:用户号
**********************************************************************/ void set_user_id(QString str); /*********************************************************************
* 属性读取:password
**********************************************************************/ QString password(); /*********************************************************************
* 属性写入:password
**********************************************************************/ void set_password(QString str); /*********************************************************************
* 属性读取:记住password标志
**********************************************************************/ bool flag_remember(); /*********************************************************************
* 属性写入:记住password标志
**********************************************************************/ void set_flag_remember(bool flag); /*********************************************************************
* 属性读取:自己主动登陆标志
**********************************************************************/ bool flag_auto(); /*********************************************************************
* 属性写入:自己主动登陆标志
**********************************************************************/ void set_flag_auto(bool flag); signals: /*********************************************************************
* 属性改变信号:用户号
**********************************************************************/ void sig_user_id_changed(); /*********************************************************************
* 属性改变信号:password
**********************************************************************/ void sig_password_changed(); /*********************************************************************
* 属性改变信号:记住password标志
**********************************************************************/ void sig_flag_remember_changed(); /*********************************************************************
* 属性改变信号:自己主动登陆标志
**********************************************************************/ void sig_flag_auto_changed(); /*********************************************************************
* 信号:登陆结果
*參数:result:0:成功
* 1:无此username
* 2:password错误
* 3:达到登陆的最大次数
**********************************************************************/ void sig_login_result(int result); /*********************************************************************
* 发送网络帧
*參数:id:username
* password:password
* cmd:帧命令
* index:发送序列号
* frame:发送的报文
**********************************************************************/ void sig_net_tx_frame_with_id(uint32_t id,uint32_t password,int cmd,uint16_t index,QByteArray frame); public slots: /*********************************************************************
* 槽函数:登陆请求
**********************************************************************/ void slot_login_req(); /*********************************************************************
* 槽函数:登陆响应
*參数:data:接收的数据
**********************************************************************/ void slot_login_ack(QByteArray data); private slots: /*********************************************************************
* 槽函数:心跳滴答函数
*说明:1滴答触发1次
**********************************************************************/ void slot_tick(); private: /*********************************************************************
* 变量
**********************************************************************/ /*********************************************************************
* 属性:用户号
**********************************************************************/ QString _user_id; /*********************************************************************
* 属性:password
**********************************************************************/ QString _password; /*********************************************************************
* 属性:记住password标志
**********************************************************************/ bool _flag_remember; /*********************************************************************
* 属性:自己主动登录标志
**********************************************************************/ bool _flag_auto; /*********************************************************************
* 滴答定时器
**********************************************************************/ QTimer *timer; /*********************************************************************
* 登录计数器
**********************************************************************/ int Login_Counter;
}; #endif // LOGIN_GUI_H
login_gui.c
/*********************************************************************
* 登陆界面模块主文件
* (c)copyright 2014,jdh
* All Right Reserved
*新建日期:2014/1/29 by jdh
*改动日期:2014/2/1 by jdh
*改动日期:2014/2/17 by jdh
*改动日期:2014/2/18 by jdh
*改动日期:2014/2/16 by jdh
*改动日期:2014/5/4 by jdh
*改动日期:2014/5/5 by jdh
*改动日期:2014/5/13 by jdh
**********************************************************************/ /*********************************************************************
* 头文件
**********************************************************************/ #include "login_gui.h" /*********************************************************************
* 函数
**********************************************************************/ /*********************************************************************
* 初始化函数
**********************************************************************/ Login_Gui::Login_Gui()
{
//初始化变量
Login_Counter = 0; //滴答初始化
timer = new QTimer(this);
//绑定信号槽
connect(timer, SIGNAL (timeout()), this , SLOT(slot_tick())); QFile file_cfg("cfg.txt");
QByteArray arr;
bool ok;
int flag_remember = 0;
int flag_auto_login = 0;
int id = 0;
int password = 0;
QString str;
int i = 0;
int j = 0; //属性初始化
_user_id = "";
_password = "";
_flag_remember = false;
_flag_auto = false; //推断文件是否存在
if (!file_cfg.exists())
{
file_cfg.close();
}
else
{
//文件存在
file_cfg.open(QIODevice::ReadOnly);
//读取文件
do
{
str.clear();
arr = file_cfg.readLine();
for (i = 0;i < arr.count();i++)
{
if ((arr.at(i) >= '0' && arr.at(i) <= '9') || \
(arr.at(i) >= 'a' && arr.at(i) <= 'f') || \
arr.at(i) == 'x')
{
str[j++] = arr.at(i);
}
}
flag_remember = str.toInt(&ok,16);
if (!ok)
{
break;
} str.clear();
arr = file_cfg.readLine();
for (i = 0;i < arr.count();i++)
{
if ((arr.at(i) >= '0' && arr.at(i) <= '9') || \
(arr.at(i) >= 'a' && arr.at(i) <= 'f') || \
arr.at(i) == 'x')
{
str[j++] = arr.at(i);
}
}
flag_auto_login = str.toInt(&ok,16);
if (!ok)
{
break;
} str.clear();
arr = file_cfg.readLine();
for (i = 0;i < arr.count();i++)
{
if ((arr.at(i) >= '0' && arr.at(i) <= '9') || \
(arr.at(i) >= 'a' && arr.at(i) <= 'f') || \
arr.at(i) == 'x')
{
str[j++] = arr.at(i);
}
}
id = str.toInt(&ok,16);
if (!ok)
{
break;
} str.clear();
arr = file_cfg.readLine();
for (i = 0;i < arr.count();i++)
{
if ((arr.at(i) >= '0' && arr.at(i) <= '9') || \
(arr.at(i) >= 'a' && arr.at(i) <= 'f') || \
arr.at(i) == 'x')
{
str[j++] = arr.at(i);
}
}
password = str.toInt(&ok,16);
if (!ok)
{
break;
} //推断是否记住密码
if (flag_remember == VALID_FLAG)
{
_user_id = QString::number(id,10);
_password = QString::number(password,10);
_flag_remember = true; //推断是否自己主动登录
if (flag_auto_login == VALID_FLAG)
{
_flag_auto = true;
slot_login_req();
}
}
} while (0); file_cfg.close();
}
} /*********************************************************************
* 解构函数
**********************************************************************/ Login_Gui::~Login_Gui()
{
} /*********************************************************************
* 属性读取:用户号
**********************************************************************/ QString Login_Gui::user_id()
{
return _user_id;
} /*********************************************************************
* 属性写入:用户号
**********************************************************************/ void Login_Gui::set_user_id(QString str)
{
if (_user_id != str)
{
_user_id = str;
emit sig_user_id_changed();
}
} /*********************************************************************
* 属性读取:密码
**********************************************************************/ QString Login_Gui::password()
{
return _password;
} /*********************************************************************
* 属性写入:密码
**********************************************************************/ void Login_Gui::set_password(QString str)
{
if (_password != str)
{
_password = str;
emit sig_password_changed();
}
} /*********************************************************************
* 属性读取:记住密码标志
**********************************************************************/ bool Login_Gui::flag_remember()
{
return _flag_remember;
} /*********************************************************************
* 属性写入:记住密码标志
**********************************************************************/ void Login_Gui::set_flag_remember(bool flag)
{
if (_flag_remember != flag)
{
_flag_remember = flag;
emit sig_flag_remember_changed();
}
} /*********************************************************************
* 属性读取:自己主动登陆标志
**********************************************************************/ bool Login_Gui::flag_auto()
{
return _flag_auto;
} /*********************************************************************
* 属性写入:自己主动登陆标志
**********************************************************************/ void Login_Gui::set_flag_auto(bool flag)
{
if (_flag_auto != flag)
{
_flag_auto = flag;
emit sig_flag_auto_changed();
}
} /*********************************************************************
* 槽函数:登陆请求
**********************************************************************/ void Login_Gui::slot_login_req()
{
//初始化计数器
Login_Counter = 0;
//開始尝试登陆
timer->start(INTERVAL_LOGIN);
slot_tick();
} /*********************************************************************
* 槽函数:登陆响应
*參数:data:接收的数据
**********************************************************************/ void Login_Gui::slot_login_ack(QByteArray data)
{
uint32_t id = 0;
uint32_t password = 0;
int flag_remember = 0;
int flag_auto_login = 0;
uint8_t result = 0;
bool ok; #ifdef DEBUG
qDebug() << "接收帧:尝试登陆" << (uint8_t)data[0] << (uint8_t)data[1] << (uint8_t)data[2];
#endif //清除计数器
Login_Counter = 0;
//停止登录尝试
timer->stop(); //推断用户号和密码是否匹配
id = ((uint8_t)data[6] << 24) +\
((uint8_t)data[7] << 16) + \
((uint8_t)data[8] << 8) + \
(uint8_t)data[9];
password = ((uint8_t)data[10] << 24) +\
((uint8_t)data[11] << 16) + \
((uint8_t)data[12] << 8) + \
(uint8_t)data[13];
//登陆结果
result = (uint8_t)data[LEN_FRAME_HEAD];
//推断登陆结果
switch (result)
{
//登陆成功
case 0:
{
//推断username与password是否正确
if (id == (uint32_t)_user_id.toInt(&ok) && password == (uint32_t)_password.toInt(&ok))
{
//发送登陆成功信号
emit sig_login_result(0); #ifdef DEBUG
qDebug() << "登陆成功" << "用户号" << _user_id << "密码" << _password;
#endif //推断是否勾选记住密码以及自己主动登录
if (_flag_remember)
{
flag_remember = VALID_FLAG;
}
if (_flag_auto)
{
flag_auto_login = VALID_FLAG;
} //将username密码保存
QFile file_cfg("cfg.txt");
file_cfg.open(QIODevice::WriteOnly);
QTextStream out(&file_cfg);
out << QString::number(flag_remember,16) << "\r\n" \
<< QString::number(flag_auto_login,16) << "\r\n" \
<< _user_id << "\r\n" \
<< _password << "\r\n";
file_cfg.close();
} break;
}
//无此username
case 1:
{
#ifdef DEBUG
qDebug() << "登陆失败" << "用户号不存在";
#endif //发送登录失败信号
emit sig_login_result(1); break;
}
//密码错误
case 2:
{
#ifdef DEBUG
qDebug() << "登陆失败" << "密码错误";
#endif //发送登录失败信号
emit sig_login_result(2); break;
}
}
} /*********************************************************************
* 槽函数:心跳滴答函数
*说明:1滴答触发1次
**********************************************************************/ void Login_Gui::slot_tick()
{
QByteArray frame;
bool ok; //登录计数器
Login_Counter++;
if (Login_Counter > NUM_LOGIN)
{
#ifdef DEBUG
qDebug() << "登录失败" << "达到最大尝试登陆次数:" << NUM_LOGIN;
#endif //清除计数器
Login_Counter = 0; //停止登陆尝试
timer->stop();
//发送登陆失败信号
emit sig_login_result(3); return;
} //发送登陆请求
//报文
frame.clear();
//发送网络帧
#ifdef DEBUG
qDebug() << "发送帧:发送登陆请求";
#endif
emit sig_net_tx_frame_with_id((uint32_t)_user_id.toInt(&ok),(uint32_t)_password.toInt(&ok),\
CMD_USER_LOGIN_REQUEST,0,frame);
}
QML与C++交互:登陆界面设计的更多相关文章
- WDA演练一：用户登陆界面设计(二)
一,登陆界面设计: 1.将系统编号灰显,默认初值 2.密码栏勾选密码显示,这样就不会明文显示在页面上了: Init方法中添加默认值代码: METHOD wddoinit . DATA lo_nd_zh ...
- WDA演练一：用户登陆界面设计(一)
一,新建用户表: 用户和密码参考标准的.这里给用户分了几个维度,以便后面进行接下来的业务设定. 二,新建ZLY_PORTAL 程序. 除了MAIN视图外,在添加LOGON视图. 1.导入预先做好的主页 ...
- 简单的Windows登陆界面设计
要求: 1.用户名必须为字母. //限定用户名必须为字母 private void txtName_KeyPress(object sender, KeyPressEventArgs e) { if ...
- java web程序 上机考试登陆界面设计实现
今天是java web上机.做一个登陆注册的界面.要求:jsp.mysql数据库,js做一个美观的界面.功能.可以添加 更多啊.我做的界面被老师狠狠的扣了分.问题在于.当用户没有输入任何信息(没有输入 ...
- 【Android】登陆界面设计
界面布局 布局其实很简单,用相对布局累起来就可以了,然后注册和记住密码这两个控件放在一个水平线性布局里 界面底部还设置了一个QQ一键登录的入口,可以直接用. 控件的ID命名有点乱 <?xml v ...
- CMSdede后台登陆界面设计
1 在这里我就公布 css 和jq 也就是dede文件下templets的login.htm页面:代码如下 $(function () { $(".tex ...
- QML设计登陆界面
QML设计登陆界面 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发环境:Qt5.2 说明: 用QML设计一个应用的登陆界面 ...
- 设计师们做UI设计和交互设计、界面设计等一般会去什么网站呢？
明明可靠颜值吃饭,却偏偏要靠才华立身,UI设计师就是这样一群神奇的物种.面对“大的同时小一点”.“五彩斑斓黑”.“下班之前给我”……这些甲方大大刁钻的需求,设计师每天都在咬牙微笑讨生活.你可以批评我的 ...
- WPF和Expression Blend开发实例:模拟QQ登陆界面打开和关闭特效
不管在消费者的心中腾讯是一个怎么样的模仿者抄袭者的形象,但是腾讯在软件交互上的设计一直是一流的.正如某位已故的知名产品经理所说的:设计并非外观怎样,感觉如何.设计的是产品的工作原理.我觉得腾讯掌握了其 ...
随机推荐
- 进程的互斥运行：CreateMutex函数实现只运行一个程序实例
HANDLE hMutex=CreateMutex(NULL,TRUE,"HDZBUkeyDoctorTool"); if(hMutex) { if(ERROR_ALREADY_E ...
- Java B
3.继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么? 答:父类: package test; public class FatherClass { public FatherClass( ...
- controller,sevices层，java初步了解
一.controller层 二.service层 1.接口 2.接口的实现 转换 ClearingAccountArgument对象
- idea关闭，tomcat却没关闭的设置方法
最近,遇到个事,我在打开tomcat时,关闭了idea,再次打开时,运行tomcat时,发现端口占用,查看任务管理器,发现,tomcat没有随idea的关闭而关闭. 后来,想想,可能是,在关闭时,点了 ...
- python3+beautifulSoup4.6抓取某网站小说（一）爬虫初探
本次学习重点: 1.使用urllib的request进行网页请求,获取当前url整版网页内容 2.对于多级抓取,先想好抓取思路,再动手 3.BeautifulSoup获取html网页中的指定内容 4. ...
- android实战简易教程－链接
http://blog.csdn.net/yayun0516/article/category/2799943
- BZOJ 4519 不同的最小割 最小割树
题面: 把每两个点当成源汇,求N*(N-1)个最小割中不同的有多少个 N<=850 分析: 有这样一个结论:一张无向图不同的最小割最多有n-1个. 那么我们一定可以建出一棵树,使得这棵树中每两个 ...
- HYSBZ - 3750 Pieczęć（模拟）
题目: 一张n*m的方格纸,有些格子需要印成黑色,剩下的格子需要保留白色. 你有一个a*b的印章,有些格子是凸起(会沾上墨水)的.你需要判断能否用这个印章印出纸上的图案.印的过程中需要满足以下要求: ...
- php 日常问题
1.isset.empty.is_null的区别 isset 判断变量是否定义或者是否为空 变量存在返回ture,否则返回false 变量定义不赋值返回false unset一个变量,返回false ...
- ruby on rails使用gmail的smtp发送邮件
参考至http://guides.rubyonrails.org/action_mailer_basics.html 在gmail账户的安全里先开启两步验证(链接:https://myaccount. ...