Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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.


Log in to reply