标签：userName Qt6.2 settings demo qml text import userPass id
参考
环境
| 环境 |
版本 |
| windows |
10 |
| QT |
6.2.4 |
| Qt Creator |
8.0.1 (Community) |
| qmake |
|
signal 使用信号和槽实现事件监听、参数传递- 父组件实现函数，子组件调用，实现复用
anchors 锚点实现节点位置调整Settings 实现数据保存本地与读取Popup 实现弹出框提醒
效果展示
项目结构截图
登陆注册详情页展示
代码
- 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();
}
}
}
}
标签：userName,
Qt6.2,
settings,
demo,
qml,
text,
import,
userPass,
id
From： https://www.cnblogs.com/xiaqiuchu/p/16633239.html