How to create a button that opens another window without needing to open several?

[Janilson Duarte]

I want to create a button that when we click gives the possibility to open other screens without needing to open several, it is all only in a main screen.

[dheerendra]

Not very clear about the question. Did you try something which did not work ? Can you give more details.

[Janilson Duarte]

@dheerendra I tried this but with this code it opens many pages, I want it to work on the same page.

    Item {
        width: 200; height: 200

        Loader { id: pageLoader }

        MouseArea {
            anchors.fill: parent
            onClicked: pageLoader.source = "main.qml"
        }
    }

[dheerendra]

It should not. It should create only one. What is the code in main.qml ?

[Janilson Duarte]

@dheerendra What I want is the following, when I click on button 1's tab it displays the information on tab 1 on the right side and with the other buttons too, you have the possibility to do this?

    Row {
        anchors.fill: parent

        TabBar {
            id: tabBar
            width: 150

            contentItem: Column {

            TabButton {
                text: qsTr("Tab 0")
            }
            TabButton {
                text: qsTr("Tab 1")
            }
            TabButton {
                text: qsTr("Tab 2")
            }

            }
        }

        Item {
            id: contentArea
            width: parent.width - tabBar.width
            height: parent.height

            Item {
                id: tabContent0
                anchors.fill: parent
                visible: tabBar.currentIndex == 0

                Label {
                    text: qsTr("Tab 0 content")
                    anchors.centerIn: parent
                }
            }

            Item {
                id: tabContent1
                anchors.fill: parent
                visible: tabBar.currentIndex == 1

                Label {
                    text: qsTr("Tab 1 content")
                    anchors.centerIn: parent
                }
            }

            Item {
                id: tabContent2
                anchors.fill: parent
                visible: tabBar.currentIndex == 2

                Label {
                    text: qsTr("Tab 2 content")
                    anchors.centerIn: parent
                }
            }
        }
    }

[Janilson Duarte]

People, I did many experiencs but almost nothing worked until I found this post https://evileg.com/en/post/191/ that helped me and I used to turn the menu horizontal to vertical. below is the code I used.

Thank you very much!

// Layer with buttons that will change the fragments
RowLayout {
    id: rowLayout
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.leftMargin: 0
    anchors.margins: 15

    Button {
        id: button1
        anchors.left: rowLayout.left
        text: qsTr("Fragment 1")
        // Download the component from a file
        onClicked: loader.source = "Fragment1.qml"
    }

    Button {
        id: button2
        anchors.left: rowLayout.left
        anchors.top: button1.bottom
        text: qsTr("Fragment 2")
        // Loading setSource component through the method of installing the fragment parameters
        onClicked: loader.setSource("Fragment2.qml")
    }

    Button {
        id: button3
        anchors.left: rowLayout.left
        anchors.top: button2.bottom

        text: qsTr("Fragment 3")
        // Loading setSource component through the method of installing the fragment parameters
        onClicked: loader.setSource("Fragment3.qml")
    }

    Button {
        id: button4
        anchors.left: rowLayout.left
        anchors.top: button3.bottom

        text: qsTr("Fragment 4")
        // Installing a fragment from the Component
        onClicked: loader.sourceComponent = fragment4
    }

    Button {
        id: button5
        anchors.left: rowLayout.left
        anchors.top: button4.bottom

        text: qsTr("Fragment 5")
        // Installing a fragment from the Component
        onClicked: loader.sourceComponent = fragment5
    }
}

Loader {
    id: loader
    anchors.top: rowLayout.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    anchors.topMargin: -40
    anchors.leftMargin: 63
    source: "Fragment1.qml"
}