如何在QML中实现列表嵌套GridView并切换选中项内容的界面

需求概述 #

创建包含10个程序的切换列表，每个程序对应专属的20元素GridView；点击左右箭头切换程序，点击GridView元素进入对应设置页面。无需关注设置页面内8元素GridView的开发，仅需实现程序切换及对应GridView内容绑定功能。

实现代码 #

import QtQuick

Item {
    width: 700
    height: 600 // 补充高度避免布局溢出

    // 当前选中的程序索引
    property int currentProgramIndex: 0

    // 程序列表Model，每个程序包含编号、名称、对应的20步数据
    ListModel {
        id: programsModel
        ListElement {
            programNumber: "1"
            programName: "PROGRAM 1"
            stepsModel: ListModel {
                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" }
            }
        }
        ListElement {
            programNumber: "2"
            programName: "PROGRAM 2"
            stepsModel: ListModel {
                // 自定义该程序的20步内容
                ListElement { name: "1"; src:"/images/programminInnerStepsRect.png" }
                ListElement { name: "2"; src:"/images/programminInnerStepsRect.png" }
                // ... 补充剩余18个元素
            }
        }
        // ... 继续添加剩余8个程序的ListElement
    }

    // 程序名称背景
    Image {
        id: programName
        source: "/images/programNameRect.png"
        z: -1
        anchors {
            left: parent.left
            top : parent.top
            topMargin: 64
            leftMargin: 271
        }
    }

    // 左箭头及切换逻辑
    Image {
        id: arrowLeft
        source: "/images/arrowLeft.png"
        z: -1
        anchors {
            left: parent.left
            top : parent.top
            topMargin: 89
            leftMargin: 284
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (currentProgramIndex > 0) {
                    currentProgramIndex--;
                    backToStepsView();
                }
            }
        }
    }

    // 右箭头及切换逻辑
    Image {
        id: arrowRight
        source: "/images/arrowRight.png"
        z: -1
        anchors {
            left: parent.left
            top : parent.top
            topMargin: 89
            leftMargin: 507
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (currentProgramIndex < programsModel.count - 1) {
                    currentProgramIndex++;
                    backToStepsView();
                }
            }
        }
    }

    // 当前程序编号
    Text {
        id: programNameNumber
        font.family: "SF Pro Text"
        font.weight: 800
        font.pixelSize: 36
        font.letterSpacing: 1
        color: "#868383"
        text: programsModel.get(currentProgramIndex).programNumber
        anchors {
            left : programName.left
            top : programName.top
            topMargin: 4
            leftMargin: 119
        }
    }

    // 当前程序名称
    Text {
        id: programNameText
        font.family: "SF Pro Text"
        font.weight: 500
        font.pixelSize: 20
        color: "#868383"
        text: programsModel.get(currentProgramIndex).programName
        anchors {
            left : programName.left
            top : programName.top
            topMargin: 43
            leftMargin: 58
        }
    }

    // 步骤视图背景
    Image {
        id: innerStepsBackground
        source: "/images/innerProgramsBackground.png"
        z: -1
        anchors {
            left: parent.left
            top : parent.top
            topMargin: 161
            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
            topMargin: 21
            leftMargin: 265
        }
    }

    // 设置视图背景
    Image {
        visible: false
        id: innerSettingsBackground
        source: "/images/programsPhaseBackground.png"
        z: -1
        anchors {
            left: parent.left
            top : parent.top
            topMargin: 165
            leftMargin: 67
        }
    }

    // 设置视图标题
    Text {
        visible: false
        id: innerSettingsText
        font.family: "SF Pro Text"
        font.weight: 600
        font.pixelSize: 14
        font.letterSpacing: 1
        text : "ADIMLAR"
        anchors {
            left : innerSettingsBackground.left
            top : innerSettingsBackground.top
            topMargin: 21
            leftMargin: 265
        }
    }

    // 20元素步骤GridView
    GridView {
        id: programmingInnerStepsGrid
        anchors.fill: parent
        anchors.leftMargin: 147
        anchors.topMargin: 229
        model: programsModel.get(currentProgramIndex).stepsModel
        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
                    innerStepsHeader.visible = false
                    programmingStepSettingsGrid.visible = true
                    innerSettingsBackground.visible = true
                    innerSettingsText.visible = true
                }
            }
        }
    }

    // 设置页面GridView（用户可自行扩展内部内容）
    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
                onClicked: backToStepsView()
            }
        }
    }

    // 设置页面数据Model
    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"  ;  }
    }

    // 回到步骤视图的统一逻辑
    function backToStepsView() {
        programmingInnerStepsGrid.visible = true
        innerStepsBackground.visible = true
        innerStepsHeader.visible = true
        programmingStepSettingsGrid.visible = false
        innerSettingsBackground.visible = false
        innerSettingsText.visible = false
    }
}

关键实现要点 #

• 嵌套数据结构：通过ListModel嵌套实现10个程序的独立数据集合，每个程序包含自身标识和专属的20步数据，确保切换程序时GridView内容自动同步。
• 索引跟踪：用currentProgramIndex变量管理当前选中程序，左右箭头点击时修改索引并触发UI更新，同时自动回到步骤视图。
• 视图状态管理：封装backToStepsView()函数统一处理步骤视图与设置视图的显示切换，避免重复代码。
• 数据绑定：顶部程序编号、名称以及步骤GridView的Model均直接绑定到当前程序数据，保证UI与数据实时同步。

内容的提问来源于stack exchange，提问作者utkuyceng