QML与C++交互 登陆界面设计

最新推荐文章于 2024-04-12 11:31:19 发布
最新推荐文章于 2024-04-12 11:31:19 发布
阅读量386 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44949768/article/details/89476294
版权
本文介绍了如何使用QML设计登录界面，并通过C++处理后台逻辑。在Qt5.2.1环境下，QML用于创建视觉效果，而C++则专注于功能实现。文章提供了一张登录界面的效果图以及相关QML和C++的源代码示例。
摘要由CSDN通过智能技术生成
               

QML与C++交互:登陆界面设计


本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明.


环境：

主机:WIN7

开发环境:Qt5.2.1


说明:

QML设计前台界面,C++后台负责逻辑


效果图:




源代码:


前台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.0import "content"import Login_Gui 1.0Rectangle{    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;            //无此用户名            case 1:                message.text = "登陆失败:无此用户名"                message.opacity = 1                break;            //密码错误            case 2:                message.text = "登陆失败:密码错误"                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: "请输入密码"                    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                    {     
最低0.47元/天 解锁文章
合法化vvv
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QML与C++交互:登陆界面设计
weixin_33827590的博客
10-31 500
2019独角兽企业重金招聘Python工程师标准>>> ...
qml 实现一个带动画的switch 按钮
最新发布
cs821984831的博客
07-11 168
【代码】qml 实现一个带动画的switch 按钮。
【课程设计】Windows控制台上的交互界面（通过c/c++，在windows控制台实现选择菜单（可通过方向键选择））
l_migrant的博客
12-16 2190
【课程设计】Windows控制台上的交互界面（通过c/c++，在windows控制台实现选择菜单（可通过方向键选择））（以奖学金管理系统为例）
qml实现登录界面
08-22
QML是一种JSON风格的语言，专为构建图形用户界面而设计，与C++紧密结合，使得高性能应用的开发变得轻而易举。在本教程中，我们将深入探讨如何使用QML实现一个登录界面，以及如何处理界面跳转和单选框的应用。 首先...
5_QT_qt5登陆界面_QTcreator_login
09-11
【qt5登陆界面】：在QT5中，可以使用QWidgets或者QtQuick（QML）来创建登录界面。QWidgets是传统的方式，适合创建复杂的桌面应用界面，而QML则提供了更灵活的声明式编程方式，适合快速构建现代、动态的UI。登录界面...
Qt中C++代码搭配UI文件实现交互界面
SurpassLi的专栏
04-12 405
使用Qt提供的UI设计器，可以简单的通过鼠标拖拽的方式来设计交互界面，优点有很多，所见即所得、速度快、简单，如果有更细的分工：比如逻辑实现与UI实现，那么代码实现与UI实现完全可以分开进行。负责UI实现的工程师，只需要根据UI文档实现交互界面。那么Qt中会怎么使用这个ui文件呢，毕竟我们开发过程中不可能直接去读这个ui文件，简单来说，Qt在构建过程中，会将这个ui文件翻译成一个ui_打头的c++头文件，这个头文件跟基本的C++头文件没什么不一样，只是其中的代码是基于Qt的，这些代码实现了一个C++类。
c++简单设计界面
04-21
用C++写的一个简单的界面演示系统 void CMiniDrawDoc::AddFigure (CFigure *PFigure) { m_FigArray.Add (PFigure); SetModifiedFlag (); } CFigure *CMiniDrawDoc::GetFigure (int Index) { if (Index m_FigArray.GetUpperBound ()) return 0; return (CFigure *)m_FigArray.GetAt (Index); } int CMiniDrawDoc::GetNumFigs () { return m_FigArray.GetSize (); } void CMiniDrawDoc::DeleteContents() { // TODO: Add your specialized code here and/or call the base class int Index = m_FigArray.GetSize (); while (Index--) delete m_FigArray.GetAt (Index); m_FigArray.RemoveAll (); CDocument::DeleteContents(); } void CMiniDrawDoc::OnEditClearAll() { // TODO: Add your command handler code here DeleteContents (); UpdateAllViews (0); SetModifiedFlag (); } void CMiniDrawDoc::OnUpdateEditClearAll(CCmdUI* pCmdUI) { // TODO: Add your command update UI handler code here pCmdUI->Enable (m_FigArray.GetSize ()); } void CMiniDrawDoc::OnEditUndo() { // TODO: Add your command handler code here int Index = m_FigArray.GetUpperBound (); if (Index > -1) { delete m_FigArray.GetAt (Index); m_FigArray.RemoveAt (Index); } UpdateAllViews (0); SetModifiedFlag (); } void CMiniDrawDoc::OnUpdateEditUndo(CCmdUI* pCmdUI) { // TODO: Add your command update UI handler code here pCmdUI->Enable (m_FigArray.GetSize ()); } // implementation of figure classes: IMPLEMENT_SERIAL (CFigure, CObject, 3) CRect CFigure::GetDimRect () { return CRect (min (m_X1, m_X2), min (m_Y1, m_Y2), max (m_X1, m_X2) + 1, max (m_Y1, m_Y2) + 1); } void CFigure::Serialize (CArchive& ar) { if (ar.IsStoring ()) ar << m_X1 << m_Y1 << m_X2 << m_Y2 <> m_X1 >> m_Y1 >> m_X2 >> m_Y2 >> m_Color; } IMPLEMENT_SERIAL (CLine, CFigure, 3) CLine::CLine (int X1, int Y1, int X2, int Y2, COLORREF Color, int Thickness) { m_X1 = X1; m_Y1 = Y1; m_X2 = X2; m_Y2 = Y2; m_Color = Color; m_Thickness = Thickness; } void CLine::Serialize (CArchive& ar) { CFigure::Serialize (ar); if (ar.IsStoring ()) ar <> m_Thickness; } void CLine::Draw (CDC *PDC) { CPen Pen, *POldPen; // select pen/brush: Pen.CreatePen (PS_SOLID, m_Thickness, m_Color); POldPen = PDC->SelectObject (&Pen); // draw figure: PDC->MoveTo (m_X1, m_Y1); PDC->LineTo (m_X2, m_Y2); // remove pen/brush: PDC->SelectObject (POldPen); } IMPLEMENT_SERIAL (CRectangle, CFigure, 3) CRectangle::CRectangle (int X1, int Y1, int X2, int Y2, COLORREF Color, int Thickness) { m_X1 = X1; m_Y1 = Y1; m_X2 = X2; m_Y2 = Y2; m_Color = Color; m_Thickness = Thickness; } void CRectangle::Serialize (CArchive& ar) { CFigure::Serialize (ar); if (ar.IsStoring ()) ar <> m_Thickness; } void CRectangle::Draw (CDC *PDC) { CPen Pen, *POldPen; // select pen/brush: Pen.CreatePen (PS_INSIDEFRAME, m_Thickness, m_Color); POldPen = PDC->SelectObject (&Pen); PDC->SelectStockObject (NULL_BRUSH); // draw figure: PDC->Rectangle (m_X1, m_Y1, m_X2, m_Y2); // remove pen/brush: PDC->SelectObject (POldPen); } IMPLEMENT_SERIAL (CRectFill, CFigure, 3) CRectFill::CRectFill (int X1, int Y1, int X2, int Y2, COLORREF Color) { m_X1 = min (X1, X2); m_Y1 = min (Y1, Y2); m_X2 = max (X1, X2); m_Y2 = max (Y1, Y2); m_Color = Color; } void CRectFill::Draw (CDC *PDC) { CBrush Brush, *POldBrush; CPen Pen, *POldPen; // select pen/brush: Pen.CreatePen (PS_INSIDEFRAME, 1, m_Color); POldPen = PDC->SelectObject (&Pen); Brush.CreateSolidBrush (m_Color); POldBrush = PDC->SelectObject (&Brush); // draw figure: PDC->Rectangle (m_X1, m_Y1, m_X2, m_Y2); // remove pen/brush: PDC->SelectObject (POldPen); PDC->SelectObject (POldBrush); } IMPLEMENT_SERIAL (CRectRound, CFigure, 3) CRectRound::CRectRound (int X1, int Y1, int X2, int Y2, COLORREF Color, int Thickness) { m_X1 = min (X1, X2); m_Y1 = min (Y1, Y2); m_X2 = max (X1, X2); m_Y2 = max (Y1, Y2); m_Color = Color; m_Thickness = Thickness; } void CRectRound::Serialize (CArchive& ar) { CFigure::Serialize (ar); if (ar.IsStoring ()) ar <> m_Thickness; } void CRectRound::Draw (CDC *PDC) { CPen Pen, *POldPen; // select pen/brush: Pen.CreatePen (PS_INSIDEFRAME, m_Thickness, m_Color); POldPen = PDC->SelectObject (&Pen); PDC->SelectStockObject (NULL_BRUSH); // draw figure: int SizeRound = (m_X2 - m_X1 + m_Y2 - m_Y1) / 6; PDC->RoundRect (m_X1, m_Y1, m_X2, m_Y2, SizeRound, SizeRound); // remove pen/brush: PDC->SelectObject (POldPen); } IMPLEMENT_SERIAL (CRectRoundFill, CFigure, 3) CRectRoundFill::CRectRoundFill (int X1, int Y1, int X2, int Y2, COLORREF Color) { m_X1 = min (X1, X2); m_Y1 = min (Y1, Y2); m_X2 = max (X1, X2); m_Y2 = max (Y1, Y2); m_Color = Color; } void CRectRoundFill::Draw (CDC *PDC) { CBrush Brush, *POldBrush; CPen Pen, *POldPen; // select pen/brush: Pen.CreatePen (PS_INSIDEFRAME, 1, m_Color); POldPen = PDC->SelectObject (&Pen); Brush.CreateSolidBrush (m_Color); POldBrush = PDC->SelectObject (&Brush); // draw figure: int SizeRound = (m_X2 - m_X1 + m_Y2 - m_Y1) / 6; PDC->RoundRect (m_X1, m_Y1, m_X2, m_Y2, SizeRound, SizeRound); // remove pen/brush: PDC->SelectObject (POldPen); PDC->SelectObject (POldBrush); } IMPLEMENT_SERIAL (CCircle, CFigure, 3) CCircle::CCircle (int X1, int Y1, int X2, int Y2, COLORREF Color, int Thickness) { m_X1 = min (X1, X2); m_Y1 = min (Y1, Y2); m_X2 = max (X1, X2); m_Y2 = max (Y1, Y2); m_Color = Color; m_Thickness = Thickness; } void CCircle::Serialize (CArchive& ar) { CFigure::Serialize (ar); if (ar.IsStoring ()) ar <> m_Thickness; } void CCircle::Draw (CDC *PDC) { CPen Pen, *POldPen; // select pen/brush: Pen.CreatePen (PS_INSIDEFRAME, m_Thickness, m_Color); POldPen = PDC->SelectObject (&Pen); PDC->SelectStockObject (NULL_BRUSH); // draw figure: PDC->Ellipse (m_X1, m_Y1, m_X2, m_Y2); // remove pen/brush: PDC->SelectObject (POldPen); } IMPLEMENT_SERIAL (CCircleFill, CFigure, 3) CCircleFill::CCircleFill (int X1, int Y1, int X2, int Y2, COLORREF Color) { m_X1 = min (X1, X2); m_Y1 = min (Y1, Y2); m_X2 = max (X1, X2); m_Y2 = max (Y1, Y2); m_Color = Color; } void CCircleFill::Draw (CDC *PDC) { CBrush Brush, *POldBrush; CPen Pen, *POldPen; // select pen/brush: Pen.CreatePen (PS_INSIDEFRAME, 1, m_Color); POldPen = PDC->SelectObject (&Pen); Brush.CreateSolidBrush (m_Color); POldBrush = PDC->SelectObject (&Brush); // draw figure: PDC->Ellipse (m_X1, m_Y1, m_X2, m_Y2); // remove pen/brush: PDC->SelectObject (POldPen); PDC->SelectObject (POldBrush); }
VS2010 C++ MFC 登陆界面设计
01-21
VS2010 C++ MFC 在主程序显示前显示登陆界面，初始账户密码均为zc。使用access数据库，密码可在其中修改。
QML界面小例子
10-21
自学QML边学边做了一个小例子，希望对大家学习有帮助！
用C++写一个自己的QQ（九、界面交互）
LyRics1996的博客
09-08 1128
一、登录界面 就一个登录按钮： 二、客户端界面 2.1 显示账户信息 这个代码逻辑同服务端一样 看懂服务端的，就知道这里该怎么写了，一模一样，所以不赘述了 2.2 打开聊天窗口 双击用户，打开聊天窗口 三、聊天界面 3.1 初始化 初始化时，加载对方信息和我的信息 3.2 发送消息 点击发送按钮： 3.3 接收消息 开个定时器，定时刷新即可 四、运行 最后再来看一遍运行效果 启动服务器 打开客户端，输入id密码，登录 登录多个用户，这里我没有做实时的刷新，所以有些已经登录上了还是灰色状态
c++可视化界面设计_专栏 | Python+Pycharm+PyQT5可视化程序设计入门
weixin_39996141的博客
11-27 377
作者介绍mishaw高级工程师擅长领域：轮胎建模与仿真，模态轮胎生成，虚拟路谱的整车路躁仿真，CAE NVH前后处理程序开发，结构优化 ，整车建模，仿真精度提升 ，NVH问题解决。一个优秀的程序必须要有友好的可视化交互界面GUI。Python有很多GUI开发的框架，像我之前常用的是自带的Tkinter，对于一些小功能不复杂的程序是绰绰有余的，但对于功能稍微复杂，还是希望找到更简便快捷的GUI设计框...
C++ + MFC 写一个程序参数修改器（五、界面交互）
LyRics1996的博客
08-28 974
一、说明 前面几篇，已经将所有基本的工具函数写完，这一篇，主要是将所有的功能串起来，使界面和功能进行交互。 二、初始化 2.1 初始化两个listctrl 查找的list控件只需要一栏，显示地址就可以了 目标list控件需要四栏，分别为说明、地址、类型、值，其中说明可以不考虑 将这两个函数在OnInitDialog中调用 2.2 初始化搜索和编辑设置 将这两个函数在OnInitDialog中调用 2.3 回调函数 三、搜索 3.1 首次搜索 双击首次搜索按钮，在生成的函数中加入以下代码： 逻辑
用c++写出带交互界面的简单计算器
热门推荐
yogur_father的博客
05-21 1万+
利用devc++和QT写交互界面的计算器 一.先下载一个QT 下载地址 http://download.qt.io/archive/qt/ 我下载的是 5.12.8 版本的 第四个是windos的 第五个是mac的 第六个是linux的 按需下载就行了 这里有一篇下载安装教程可以看看 https://blog.csdn.net/cfan927/article/details/98115783?utm_medium=distribute.pc_relevant.none-task-blog-BlogComm
QT人机交互设计实现C++,为自己的应用程序添加标题和菜单，并能通过菜单响应自己的函数完成一定的任务，用户可利用键盘、鼠标控制程序运行.利用connect函数、计时器等。
m0_59276096的博客
06-15 686
mainwindow.h protected: void paintEvent(QPaintEvent*e); void mousePressEvent(QMouseEvent *event); private: int m_i ; QTimer*m_pTimer ; Ui::MainWindow *ui; private slots: void Fun1(); mainwindow.cpp #include "mainwindow...
QT教程：QML与C++深度交互实践
总结来说，QML与C++的交互提供了强大的灵活性，允许开发者利用QML的声明式UI设计和C++的强类型、高性能编程。通过正确地导出C++类和其成员，可以在QML中充分利用C++的功能，构建功能丰富的应用程序。理解并熟练掌握...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值