ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Qt6.2.4 qml 实现登录注册及显示详情demo

2022-08-28 18:04:28  阅读:206  来源: 互联网

标签:userName Qt6.2 settings demo qml text import userPass id


参考

环境

环境 版本
windows 10
QT 6.2.4
Qt Creator 8.0.1 (Community)
qmake

config.ini 文件会自动在项目目录下生成

  • signal 使用信号和槽实现事件监听、参数传递
  • 父组件实现函数,子组件调用,实现复用
  • anchors 锚点实现节点位置调整
  • Settings 实现数据保存本地与读取
  • Popup 实现弹出框提醒

效果展示

gif演示

image

项目结构截图

image

登陆注册详情页展示

image

image

image

代码

  1. 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
        }
    }
}

  1. 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()
            }
        }
    }

}


  1. 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()
            }
        }
    }

}


  1. 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();
            }
        }
    }

}


标签:userName,Qt6.2,settings,demo,qml,text,import,userPass,id
来源: https://www.cnblogs.com/xiaqiuchu/p/16633239.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有