Qt6.2.4 qml 实现登录注册及显示详情demo
2022/8/28 23:23:11
本文主要是介绍Qt6.2.4 qml 实现登录注册及显示详情demo,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
参考
- https://www.bilibili.com/video/BV1dS4y1u7vN?spm_id_from=333.999.0.0 (很棒的教程)
环境
环境 | 版本 |
---|---|
windows | 10 |
QT | 6.2.4 |
Qt Creator | 8.0.1 (Community) |
qmake |
config.ini 文件会自动在项目目录下生成
signal
使用信号和槽实现事件监听、参数传递- 父组件实现函数,子组件调用,实现复用
anchors
锚点实现节点位置调整Settings
实现数据保存本地与读取Popup
实现弹出框提醒
效果展示
gif演示
项目结构截图
登陆注册详情页展示
代码
- main.qml
import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 import Qt.labs.settings Window { id: mainWindow width: 640 height: 480 visible: true title: qsTr("主窗口") // 点击登录处理函数 function onLoginChange(userName,userPass){ console.log(userName,userPass) } // 点击退出处理函数 function onAppExit(){ mainWindow.close() } LoginWindow { id: loginPage visible: true anchors.centerIn: parent // 接受信号第一种(多处调用推荐):可以调用公共方法,但是接收参数要与信号一致 // onLoginChange: mainWindow.onLoginChange(name,password) // 接受信号第二种(只在这里使用的方法推荐这种):匿名函数方式,参数可以不与信号参数一致 onLoginChange: function(userName,userPass){ loginPage.visible = false userInfoPage.visible = true } // 切换到注册界面 onChangePageToReg: { loginPage.visible = false regUserPage.visible = true } // 接受信号 onAppExit: mainWindow.onAppExit() } UserInfo { id: userInfoPage visible: false anchors.centerIn: parent // 切换到登录界面 onChangePageToLogin: { userInfoPage.visible = false loginPage.visible = true } } RegUser { id: regUserPage visible: false anchors.centerIn: parent // 接受信号 onAppExit: mainWindow.onAppExit() // 切换到登录界面 onChangePageToLogin: { regUserPage.visible = false loginPage.visible = true } } }
- LoginWindow.qml
import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 import Qt.labs.settings Rectangle{ id: loginPage width: 300 height: 120 // 发送登录信号 signal loginChange() // 发送切换到reg注册界面信号 signal changePageToReg() // 退出信号 signal appExit() // 配置 Settings { id: settings fileName: "./config.ini" property string userName property string userPass } Grid{ id: userInfoList columns: 2 rows : 2 spacing: 10 anchors.horizontalCenter:loginPage.horizontalCenter topPadding: 10 Text{ text: "用户名:" } TextField { id:userName } Text{ text: "密码:" } TextField { id:userPass echoMode: TextField.Password } } Popup { id: loginMessageBox visible: false anchors.centerIn: parent width: parent.width height: 40 modal: true Text{ id: loginMessageBoxText anchors.centerIn: parent text:"出错啦" width: parent.width } } Row{ spacing: 10 anchors.bottom: loginPage.bottom anchors.horizontalCenter:loginPage.horizontalCenter Button{ text:"登录" onClicked:{ if(settings.userName !== userName.text || settings.userPass !== userPass.text){ loginMessageBox.visible = true loginMessageBoxText.text = "账号密码错误或者不存在该用户"; return console.log(loginMessageBoxText.text) } // 发送登录信号 loginChange() } } Button{ text:"切换注册" onClicked:{ // 发送切换到reg注册界面信号 changePageToReg() } } Button{ text:"退出登录" onClicked:{ // 发送退出信号 appExit() } } } }
- RegUser.qml
import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 import Qt.labs.settings Rectangle{ id: regUserPage width: 300 height: 120 // 切换登录 signal changePageToLogin() // 退出信号 signal appExit() // 配置 Settings { id: settings fileName: "./config.ini" property string userName property string userPass } // Grid{ id: regUserInfoList columns: 2 rows : 4 spacing: 10 anchors.horizontalCenter:regUserPage.horizontalCenter topPadding: 10 Text{ text: "用户名:" } TextField { id: userName } Text{ text: "密码:" } TextField { id: userPass echoMode: TextField.Password } Text{ text: "性别:" } TextField { } } Row{ spacing: 10 anchors.bottom: regUserPage.bottom anchors.horizontalCenter:regUserPage.horizontalCenter Button{ text:"注册" onClicked:{ console.log(userName, userPass); settings.userName = userName.text settings.userPass = userPass.text changePageToLogin() } } Button{ text:"切换登录" onClicked:{ changePageToLogin() } } Button{ text:"退出登录" onClicked:{ // 发送退出信号 appExit() } } } }
- UserInfo.qml
import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 import Qt.labs.settings Rectangle{ id: userInfoPage // border.width: 5 // border.color: "black" width: 300 height: 120 // 切换登录 signal changePageToLogin() // 配置 Settings { id: settings fileName: "./config.ini" property string userName property string userPass } Grid{ id: userInfoList columns: 2 rows : 4 spacing: 10 anchors.horizontalCenter:userInfoPage.horizontalCenter topPadding: 10 Text{ text: "用户名:" } TextField { id: userName text:settings.userName } Text{ text: "密码:" } TextField { id: userPass text:settings.userPass } Text{ text: "性别:" } TextField { } } Row{ spacing: 10 anchors.bottom: userInfoPage.bottom anchors.horizontalCenter:userInfoPage.horizontalCenter Button{ text:"更新" onClicked:{ console.log(userName, userPass); settings.userName = userName.text settings.userPass = userPass.text changePageToLogin() } } Button{ text:"退出登录" onClicked:{ changePageToLogin(); } } } }
这篇关于Qt6.2.4 qml 实现登录注册及显示详情demo的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行