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

Accessing and altering the same view from different Qml files



  • I just wanna know if this is the right way of passing selected view item from main.qml to profile.qml. Here is my code:

    main.qml:

    import QtQuick 2.12
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.3
    import UserModel 0.1
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        
        // Invisible Row used to access and alter view defined in some other Qml file
        Row {
            id: helper
            visible: false
    
            // other helper functions...
    
            property variant m: null  // global variable
            function show_profile(model){           
                helper.m = model  
                home.pop()
                home.push("Profile.qml")
            }
        }
    
        StackView {
            id: home
            anchors.fill: parent
            padding: 0
    
            initialItem: Pane {
                id: pane
    
                ListView {
                    anchors.fill: parent
    
                    delegate: SwipeDelegate {
                            width: parent.width
                            height: 50
                            text: model.name
    
                            swipe.onCompleted: {
                                if (swipe.position > 0)
                                    // passing item of view to different qml file
                                    helper.show_profile(model, "Profile")
                                swipe.close()
                            }
                            swipe.left: Label {
                                id: profile_swipe
                                text: qsTr("Profile")
                                color: "white"
                                verticalAlignment: Label.AlignVCenter
                                padding: 12
                                height: parent.height
                                anchors.left: parent.left
                            }
                    }
                    model: UserModel { id: user_model }
                }
            }
        }
    }
    
    

    Profile.qml:

    import QtQuick 2.0
    import QtQuick.Controls 2.4
    import QtQuick.Layouts 1.3
    
    Pane {
        id: profile
        padding: 0
    
        RowLayout {
            id: user_detail
    
            Button {
                id: back
                text: "Back"
                onClicked: {
                    helper.m = null
                    home.pop()
                }
            }
            Label {
                    id: username
                    text: helper.m.name
                  }
            Label {
                    id: address
                    text: helper.m.address
                  }
            Label {
                    id: join_date
                    text: helper.m.join_date
                  }
            Button {
                id: del
                text: "Delete"
                onClicked: {
                    user_model.removeRow(helper.m.index)
                    back.clicked()
                }
            }
        }
    }
    

    Is helper.m the right way of having same view in different Qml files ?



  • You can get StackView instance from Profile.qml quite easy, using StackView attached properties. Define new property at your StackView:

        StackView {
            id: home
            property var modeldata: null // Define StackView property
            
            initialItem: Pane {
                ...
                ListView {
                    ...
                    delegate: SwipeDelegate {
                        ...
                        swipe.onCompleted: {
                            if (swipe.position > 0) {
                                home.modeldata = model; // Set StackView property
                                home.pop();
                                home.push("Profile.qml");
                            }
                            ...
                        }
                        ...
                    }
                }
            }
        }
    

    And then at Profile.qml you can easily get attached StackView property:

        Pane {
            id: profile
            ...
            Button {
                ...
                text: "Delete"
                onClicked: {
                    let modeldata = profile.StackView.view.modeldata; // Accessing StackView property via attached properties
                    if (modeldata !== null)
                    {
                        user_model.removeRow(modledata.index);
                    }
                    ...
                }
            }
        }
    

    In this case you do not need workaround with helper row. Also if you need some objects like your helper - better way is to use QtObject rather than visual 'invisible' object.