How to create a GridView inside a Gridview(or list) by showing only selected in QML

Question

I am trying to build a interface with QtQuick2 and i am having a trouble with a program list. I am trying to create a 10-element list and every element should have their own 20-element gridviews. And inside this gridViews when user selected one of 20 elements, it will show a settings page which every 20 element should have too. I am not asking any help about 8-element gridview inside, just looking for a list which can switch the gridviews and content in that gridviews when clicked.

Here is the first view of the page which i designed in figma.

User will able to click on arrows to switch between 10 element(actually these are 10 different programs) and when user clicks on one of the 20 elements above, user will have the second screen below.

if i can have set every 20 elements have this content i will create a 8 element grid inside. So far i tried to code, here is it

import QtQuick


Item {

width: 700

Image {
        id: programName
        source: "/images/programNameRect.png"   // this is background image for background (< 1 >) program name part
        z: -1
        anchors {
            left: parent.left
            top : parent.top
        }
        anchors.topMargin: 64
        anchors.leftMargin: 271
}

Image {
        id: arrowLeft
        source: "/images/arrowLeft.png"      
        z: -1
        anchors {
            left: parent.left
            top : parent.top
        }
        anchors.topMargin: 89
        anchors.leftMargin: 284
}

Image {
        id: arrowRight
        source: "/images/arrowRight.png"
        z: -1
        anchors {
            left: parent.left
            top : parent.top
        }
        anchors.topMargin: 89
        anchors.leftMargin: 507
}

Text {
    id: programNameNumber
    font.family: "SF Pro Text"
    font.weight: 800
    font.pixelSize: 36
    font.letterSpacing: 1
    color: "#868383"
    text : "1"
    anchors {
        left : programName.left
        top : programName.top
    }
    anchors.topMargin: 4
    anchors.leftMargin: 119

}

Text {
    id: programNameText
    font.family: "SF Pro Text"
    font.weight: 500
    font.pixelSize: 20
    color: "#868383"
    text : "PROGRAM NAME"
    anchors {
        left : programName.left
        top : programName.top
    }
    anchors.topMargin: 43
    anchors.leftMargin: 58

}

Image {
        id: innerStepsBackground
        source: "/images/innerProgramsBackground.png"              // background images for little 20-elements
        z: -1
        anchors {
            left: parent.left
            top : parent.top
        }
        anchors.topMargin: 161
        anchors.leftMargin: 105
}

Text {
    id: innerStepsHeader
    font.family: "SF Pro Text"
    font.weight: 600
    font.pixelSize: 14
    font.letterSpacing: 1
    text : "ADIMLAR"
    anchors {
        left : innerStepsBackground.left
        top : innerStepsBackground.top
    }
    anchors.topMargin: 21
    anchors.leftMargin: 265

}

Image {
        visible: false
        id: innerSettingsBackground
        source: "/images/programsPhaseBackground.png"           // background image for when one of the 20-elements clicked
        z: -1
        anchors {
            left: parent.left
            top : parent.top
        }
        anchors.topMargin: 165
        anchors.leftMargin: 67
}

Text {
    id: innerSettingsText
    font.family: "SF Pro Text"
    font.weight: 600
    font.pixelSize: 14
    font.letterSpacing: 1
    text : "ADIMLAR"
    anchors {
        left : innerStepsBackground.left
        top : innerStepsBackground.top
    }
    anchors.topMargin: 21
    anchors.leftMargin: 265

}

ListModel {
    id: programmingInnerStepsList
    ListElement { name: "1";   src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "2";  src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "3";   src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "4";  src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "5";   src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "6";   src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "7";  src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "8";   src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "9";  src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "10";   src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "11";   src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "12";  src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "13";   src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "14";  src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "15";   src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "16";   src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "17";  src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "18";   src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "19";  src:"/images/programminInnerStepsRect.png"  }
    ListElement { name: "20";   src:"/images/programminInnerStepsRect.png"  }
}

GridView {

    id: programmingInnerStepsGrid
    anchors.fill: parent
    anchors.leftMargin: 147
    anchors.topMargin: 229
    model: programmingInnerStepsList
    cellHeight: 60
    cellWidth: 53
    delegate: Rectangle {

        width: 39
        height: 38.5
        color: "transparent"

        Text{
            id: stepNumIns
            color: "#A6A3A3"
            text: name
            font.family: "SF Pro Text"
            font.weight: 800
            font.pixelSize: 20
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 8
            z: 999
        }


        Image {
            id: programmingInnerStepsBackground
            anchors.fill: parent
            source: src
        }

        MouseArea{
            anchors.fill: parent
            onClicked: {
                stepNumIns.color = "#575757"
                programmingInnerStepsGrid.visible = false
                innerStepsBackground.visible = false
                programmingStepSettingsGrid.visible = true
                innerSettingsBackground.visible = true
            }


        }
    }
}




ListModel {
    id: programmingStepSettings
    ListElement { name: "SICAKLIK\nSET";   src:"/images/programsPhase.png" ; values: "x °C" }
    ListElement { name: "SICAKLIK\nALARM";  src:"/images/programsPhase.png" ; values: "1"  }
    ListElement { name: "NEM\nSET";   src:"/images/programsPhase.png"  ; values: "1 RH%" }
    ListElement { name: "NEM\nALARM\nARALIĞI";  src:"/images/programsPhase.png"  ; values: "10"}
    ListElement { name: "SÜRE\nSET";   src:"/images/programsPhase.png"  ;  }
    ListElement { name: "RAMPA\nSET";   src:"/images/programsPhase.png"  ;  }
    ListElement { name: "SÜRE\nSAYIMI";  src:"/images/programsPhase.png"  ;  }
    ListElement { name: "AYDINLATMA";   src:"/images/programsPhase.png"  ;  }

}

GridView {
    visible: false
    id: programmingStepSettingsGrid
    anchors.fill: parent
    anchors.leftMargin: 105
    anchors.topMargin: 228
    model: programmingStepSettings
    cellHeight: 90
    cellWidth: 72
    delegate: Rectangle {

        width: 63
        height: 90
        color: "transparent"

        Text{
            id: stepInsideText
            color: "#4A4A4A"
            text: name
            font.family: "SF Pro Text"
            horizontalAlignment: Text.AlignHCenter
            font.weight: 400
            font.pixelSize: 8
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 12
            z: 999
        }

        Text{
            id: stepValues
            color: "#4A4A4A"
            text: values
            font.family: "SF Pro Text"
            font.weight: 400
            font.pixelSize: 14
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 44
            z: 999
        }


        Image {
            id: programmingSettingsBackground
            anchors.fill: parent
            source: src
        }

        MouseArea{
            anchors.fill: parent



           }
       }
   }
  }

Answer 1

1. You use too many images, try to use Rectangles \ Pane as backgrounds.
2. split your UI in to reuseable Components D.R.Y and avoid huge QML files.

To address your question: You would need to implement some nested models i.e like this SO in the grid you would probably need to use either DelegateChooser or to load the qml file dynamically (probably with a Loader) by a role defined in the model for the grid.

Good luck!