best practices when switching windows



  • I'm developing an application that's not too big, but it has multiple screens.

    What are the ways of switching between screens, and what's the best practices?

    This is a vague question, and I'm not expecting code samples. I can google the docs for that.

    Thanks!
    Ryan


  • Moderators

    I'm not sure what you mean by "screens", but you can take a look at QTabWidget or QStackedWidget. If it's something like a wizard take a look at QWizard.



  • @Chris-Kawa What I mean by screens is different windows. For example, I'm working on a block explorer for an alt coin (similar to bitcoin). I want to have one screen where it lists the blocks (integers), and when you click on it, it opens up a new window where you can see the transactions. I don't know if it just looks like a new window, and I'm actually changing what's in the window, or if it's actually a new window created.

    I have some code written in javascript/qml that i'll share that's badly written:
    Component {
    id: gridComp
    Row {
    Text {
    text: blocknum + " "

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        list.currentIndex = index
                        var component = Qt.createComponent("qrc:/detail.qml")
                        var window    = component.createObject(mainWindow)
                        window.show()
                        mainWindow.hide()
                    }
                }
    
            }
            Text {
                text: time + " "
            }
        }
    }
    

    The problem with this is that overtime I click the blocknum it creates a new window, so that's not ideal. I can click it 100 times, and it'll create 100 different windows.

    Thanks!
    Ryan



  • I implemented the window change using a Layout. However, I'm not sure if this is the best approach.

    Here's the code:

    blocks.qml:
    import QtQuick 2.0
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.2
    import QtQuick.Dialogs 1.2

    Item {
    ColumnLayout {
    id: mainLayout
    anchors.fill: parent
    anchors.margins: margin

        Text {
            //id: tophead
            text: mc.blockheight
        }
    
        ListView {
            id: list
            model: mc
            Layout.fillHeight: true
            delegate: gridComp
    
            highlight: Rectangle {
                 color: 'grey'
            }
    
            focus: true
    
            Keys.onPressed: {
                var pageDown = currentIndex+10;
                var pageUp = currentIndex-10;
                if (event.key === Qt.Key_PageDown && event.modifiers === Qt.NoModifier) {
                    currentIndex = pageDown >= count ? count-1 : pageDown;
                    event.accepted = true;
                }
                if (event.key === Qt.Key_PageUp && event.modifiers === Qt.NoModifier) {
                    currentIndex = pageUp < 0 ? 0 : pageUp;
                    event.accepted = true;
                }
            }
    
        }
    }
    
    Component {
        id: gridComp
        Row {
            Text {
                text: blocknum + " "
    
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        list.currentIndex = index;
    
                        /*
                        var component = Qt.createComponent("qrc:/detail.qml")
                        var window    = component.createObject(mainWindow)
                        window.show()
                        mainWindow.hide()
                        */
    
                        ld.setSource("detail.qml")
                    }
                }
            }
            Text {
                text: time + " "
            }
        }
    }
    

    }

    detail.qml:
    import QtQuick 2.5
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.2
    import QtQuick.Dialogs 1.2

    Item {
    id: detailWindow
    visible: true

    ColumnLayout {
        Text {
            text: "detail.qml"
        }
    
        Button {
            text: "Back"
    
            onClicked: {
                ld.source = "blocks.qml"
            }
        }
    }
    

    }

    main.qml:
    import QtQuick 2.5
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.2
    import QtQuick.Dialogs 1.2

    ApplicationWindow {
    id: mainWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Block Explorer")

    Loader {
        id: ld
        anchors.fill: parent
        source: "blocks.qml"
    }
    

    }

    Thanks,
    Ryan


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.