Unsolved Change UI when button pressed
-
Hello everybody,
I am new to QML and need some help here: I have 2 ui.qml files. I want when the user presses a button, the ui changes to my other file. How can I do that? -
@SimonR - please paste your code (both files if possible) so we 'the community' have something to play with, although more experienced users can probably answer you without seeing your code, but it would be helpful (for me) to see it, thanks.
-
Code:
SignInForm.ui.qml
import QtQuick 2.9 import QtQuick.Controls 2.2 PageBackground { id: pageBackground width: 600 height: 480 property alias create_account: create_account property alias login: login property alias password: password property alias username: username TextField { id: username y: 140 anchors.horizontalCenter: parent.horizontalCenter placeholderText: qsTr("Username") } TextField { id: password x: -4 y: -1 anchors.horizontalCenterOffset: 0 placeholderText: qsTr("Password") anchors.verticalCenterOffset: 0 anchors.centerIn: parent echoMode: TextInput.Password } Button { id: login x: 100 y: 297 text: qsTr("Log-In") anchors.horizontalCenter: parent.horizontalCenter font.pointSize: 16 } Button { id: create_account x: 246 y: 271 width: 109 height: 20 text: qsTr("Create an account") //when Button pressed, change to SignUpForm.ui.qml anchors.horizontalCenter: parent.horizontalCenter } }
SignIn.qml
import QtQuick 2.4 import QtQuick.Controls 2.2 import com.SimonCplusplus.signin 1.0 //C++ class to use the user input in C++ SignInForm { SIGNIN { id: signin } username.onEditingFinished: signin.username = username.text password.onEditingFinished: signin.password = password.text //when Button pressed, change to SignUpForm.ui.qml }
SignUpForm.ui.qml
import QtQuick 2.9 import QtQuick.Controls 2.2 PageBackground { width: 600 height: 480 property alias sign_up: sign_up property alias password_new: password_new property alias username_new: username_new TextField { id: username_new y: 140 anchors.horizontalCenter: parent.horizontalCenter placeholderText: qsTr("Username") } TextField { id: password_new x: -4 y: -1 anchors.horizontalCenterOffset: 0 placeholderText: qsTr("Password") anchors.verticalCenterOffset: 0 anchors.centerIn: parent echoMode: TextInput.Password } Button { id: sign_up x: 100 y: 297 text: qsTr("Sign-up") anchors.horizontalCenter: parent.horizontalCenter font.pointSize: 16 } }
SignUp.qml
import QtQuick 2.4 import QtQuick.Controls 2.2 import com.SimonCplusplus.signup 1.0 SignUpForm { SIGNUP { id: signup } username_new.onEditingFinished: signup.username = username_new.text password_new.onEditingFinished: signup.password = password_new.text }
main.qml
import QtQuick 2.6 import QtQuick.Controls 2.0 ApplicationWindow{ id: root width: 600 height: 480 visible: true SignIn { } }
Please excuse that there might be some issues, but I'm new to QML. I just want when the user presses the button create_account the application should change to SignUp.
-
I am also new(ish) to QML, so there may well be a lack of understanding on my part.
I am struggling to get your code to run, I'm seeing many errors I cannot resolve. could you also paste your .pro file please, thanks
-
You get errors because you don't have the C++ functions. I'll paste my whole project in here.
This should help. Just download the project and build it. -
@SimonR - thank you, I can compile it now, I'm due to go for lunch shortly, meanwhile, have a look at this question/answer found here on QtForum, see if this helps at all;
https://forum.qt.io/topic/72569/functions-are-not-supported-in-a-qt-quick-ui-form/2
I've tried my usual approaches but I get "functions are not supported in a Qt Quick UI form! as per the title of the link above.