QML 登录打开新窗口
时间: 2024-01-05 20:43:06 浏览: 25
以下是一个简单的示例代码,用于在QML中实现登录并打开新窗口:
LoginPage.qml:
```
import QtQuick 2.0
import QtQuick.Controls 2.0
Item {
id: loginPage
property string username: ""
property string password: ""
Column {
TextField {
id: usernameField
placeholderText: "Username"
text: loginPage.username
}
TextField {
id: passwordField
placeholderText: "Password"
text: loginPage.password
echoMode: TextInput.Password
}
Button {
text: "Login"
onClicked: {
if (usernameField.text === "admin" && passwordField.text === "admin") {
mainPage.show()
loginPage.visible = false
} else {
console.log("Invalid username or password")
}
}
}
}
Rectangle {
id: overlay
width: parent.width
height: parent.height
color: "#00000077"
visible: !mainPage.visible
MouseArea {
anchors.fill: parent
onClicked: {
overlay.visible = false
}
}
}
MainPage {
id: mainPage
visible: false
anchors.fill: parent
}
}
```
MainPage.qml:
```
import QtQuick 2.0
import QtQuick.Controls 2.0
Item {
id: mainPage
Rectangle {
id: content
width: parent.width / 2
height: parent.height / 2
color: "#ffffff"
anchors.centerIn: parent
Text {
text: "Welcome!"
font.pixelSize: 48
anchors.centerIn: parent
}
}
}
```
在这个例子中,LoginPage.qml包含一个用于登录的表单,当用户输入正确的用户名和密码时,它会显示MainPage.qml。
MainPage.qml包含一个简单的矩形和欢迎文本,以示成功登录。
要使用这些组件,您可以在您的应用程序中使用以下代码:
```
import QtQuick 2.0
import QtQuick.Controls 2.0
ApplicationWindow {
id: mainWindow
width: 640
height: 480
visible: true
LoginPage {
id: loginPage
anchors.fill: parent
}
}
```
这将在主窗口中创建LoginPage,并将其填充整个窗口。