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

Have multiple listviews that expand when clicked



  • Hello I'm somewhat new to QML and am trying to tackle a problem of displaying three listviews for an alarm screen. I want to have one list view for each list view. When each alarm listview is clicked I want to the other list views pushed down

    Here is an example of what I am trying to do.
    alarm_screen.PNG

    This is what I currently have.
    alarm_screen2.PNG

    What I'm currently having trouble understanding is how to get the list models to expand and movedown other listviews. Am I not using delegate properly? do I need to use states and transitions to re-anchor said lists? When clicked the high of the lists doesn't change. I'm just able to scroll through the list.

    My thought process was to have Boolean variables control when things should be shift...onclicked:expandedHigh=true..show list and move other lists down.

    My current code:

    Page {
        property bool expandedHigh: false
        property bool expandedMed: false
        property bool expandedLow: false
    
        ScrollView {
                    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
                    ScrollBar.vertical.active: ScrollBar.AlwaysOn
                    clip: true
                    anchors.fill: parent
                    anchors.centerIn: parent
    
        Item {
            id: alarmsStatus
            anchors.fill: parent
            Column{
            id: col
            anchors.fill: parent
    
            //first list
            ListView {
                id: ledlistHigh
                width: parent.width
                height: parent.height / 6 
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                model: alarmsModel
                delegate: Rectangle {
                    id: boarderHigh
                    width: ledlistHigh.width
                    height: (expandedHigh ? ledlistHigh.height / 7 : ledlistHigh.height
                                            * title / 7) * 6 
                    color: "white"
                    visible: expandedHigh ? true : title
                    Rectangle {
                        id: ledHigh
                        radius: 100
                        height: boarderHigh.height * 3 / 4
                        width: height
                        color: ledColor
                        anchors.left: boarderHigh.left
                        anchors.leftMargin: title ? width / 4 : width * 1.5
                        border.color: "white"
                        border.width: 2
                        anchors.verticalCenter: boarderHigh.verticalCenter
                        Text {
                            color: "white"
                            anchors.centerIn: ledHigh
                            text: "!"
                            height: ledHigh.height
                            font.pixelSize: height * 3 / 4
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.family: arialroundhand.name 
                        }
                    }
                    Text {
                        color: Variables.darkGrey
                        text: description
                        height: boarderHigh.height
                        width: boarderHigh.width
                        font.pixelSize: height / 2
                        verticalAlignment: Text.AlignVCenter
                        font.family: opensansregular.name
                        anchors.left: ledHigh.right
                        anchors.leftMargin: ledHigh.width / 4
                    }
    
                    Image {
                        id: arrow_icon
                        visible: title
                        height: parent.height / 3
                        anchors.right: parent.right
                        anchors.rightMargin: 5
                        anchors.verticalCenter: parent.verticalCenter
                        fillMode: Image.PreserveAspectFit
                        source: {
                            if (expandedHigh)
                                "up-arrow.png"
                            else
                                "down-arrow.png"
                        }
                    }
    
                    MouseArea {
                        enabled: title
                        anchors.fill: boarderHigh
                        onClicked: {
                            if (expandedHigh) {
                                expandedHigh = false
                            }
                            else {
                                expandedHigh = true;
    
                            }
                        }
                    }
                }
            }
    
    
            //second list
            ListView {
                id: ledlistMed
                width: parent.width
                height: parent.height / 6 
                anchors.top: ledlistHigh.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                model: alarmsModel2
                delegate: Rectangle {
                    id: boarderMed
                    width: ledlistMed.width
                    height: (expandedMed ? ledlistMed.height / 7 : ledlistMed.height
                                           * title / 7) * 6 /
                    color: "white"
                    visible: expandedMed ? true : title
                    Rectangle {
                        id: ledMed
                        radius: 100
                        height: boarderMed.height * 3 / 4
                        width: height
                        color: ledColor
                        anchors.left: boarderMed.left
                        anchors.leftMargin: title ? width / 4 : width * 1.5
                        border.color: "white"
                        border.width: 2
                        anchors.verticalCenter: boarderMed.verticalCenter
                        Text {
                            color: "white"
                            anchors.centerIn: ledMed
                            text: "!"
                            height: ledMed.height
                            font.pixelSize: height * 3 / 4
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.family: arialroundhand.name 
                        }
                    }
                    Text {
                        color: Variables.darkGrey
                        text: description
                        height: boarderMed.height
                        width: boarderMed.width
                        font.pixelSize: height / 2
                        verticalAlignment: Text.AlignVCenter
                        font.family: opensansregular.name
                        anchors.left: ledMed.right
                        anchors.leftMargin: ledMed.width / 4
                    }
    
                    Image {
                        id: arrow_icon2
                        visible: title
                        height: parent.height / 3
                        anchors.right: parent.right
                        anchors.rightMargin: 5
                        anchors.verticalCenter: parent.verticalCenter
                        fillMode: Image.PreserveAspectFit
                        source: {
                            if (expandedMed)
                                "up-arrow.png"
                            else
                                "down-arrow.png"
                        }
                    }
    
                    MouseArea {
                        enabled: title
                        anchors.fill: boarderMed
                        onClicked: {
                            if (expandedMed) {
                                expandedMed = false
                            } else {
                                expandedMed = true
    
                            }
                        }
                    }
                }
            }
    
    
            //list3 here
            ListView {
                id: ledlistLow
                width: parent.width
                height: parent.height / 6 
                anchors.top: ledlistMed.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                model: alarmsModel3
                delegate: Rectangle {
                    id: boarderLow
                    width: ledlistLow.width
                    height: (expandedLow ? ledlistLow.height / 7 : ledlistLow.height 
                                           * title / 7) * 6 
                    color: "white"
                    visible: expandedLow ? true : title
                    Rectangle {
                        id: ledLow
                        radius: 100
                        height: boarderLow.height * 3 / 4
                        width: height
                        color: ledColor
                        anchors.left: boarderLow.left
                        anchors.leftMargin: title ? width / 4 : width * 1.5
                        border.color: "green"
                        border.width: 2
                        anchors.verticalCenter: boarderLow.verticalCenter
                        Text {
                            color: "green"
                            anchors.centerIn: ledLow
                            text: "!"
                            height: ledLow.height
                            font.pixelSize: height * 3 / 4
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.family: arialroundhand.name
                        }
                    }
                    Text {
                        color: Variables.darkGrey
                        text: description
                        height: boarderLow.height
                        width: boarderLow.width
                        font.pixelSize: height / 2
                        verticalAlignment: Text.AlignVCenter
                        font.family: arial.name
                        anchors.left: ledLow.right
                        anchors.leftMargin: ledLow.width / 4
                    }
    
                    Image {
                        id: arrow_icon3
                        visible: title
                        height: parent.height / 3
                        anchors.right: parent.right
                        anchors.rightMargin: 5
                        anchors.verticalCenter: parent.verticalCenter
                        fillMode: Image.PreserveAspectFit
                        source: {
                            if (expandedLow)
                                "up-arrow.png"
                            else
                                "down-arrow.png"
                        }
                    }
    
                    MouseArea {
                        enabled: title
                        anchors.fill: boarderLow
                        onClicked: {
                            if (expandedLow) {
                                expandedLow = false
                            } else {
                                expandedLow = true
                            }
                        }
                    }
                }
            }
    
    
        }
    
        //models here
    
        ListModel {
            id: alarmsModel
            ListElement {
    
                description: "High Priority - 2 Alarms"
                ledColor: "#dc0a0a"
                title: 1
            }
            ListElement {
                description: "Alarm 1"
                ledColor: "#dc0a0a"
                title: 0
            }
            ListElement {
                description: "Alarm 2"
                ledColor: "#dc0a0a"
                title: 0
            }
        }
    
        ListModel {
            id: alarmsModel2
            ListElement {
                description: "Medium Priority - 3 Alarms"
                ledColor: "#ffd100"
                title: 1
            }
            ListElement {
                description: "Alarm 1"
                ledColor: "#ffd100"
                title: 0
            }
            ListElement {
                description: "Alarm 2"
                ledColor: "#ffd100"
                title: 0
            }
            ListElement {
                description: "Alarm 3"
                ledColor: "#ffd100"
                title: 0
            }
        }
    
        ListModel {
            id: alarmsModel3
            ListElement {
                description: "Low Priority - 4 Alarms"
                ledColor: "#ffffff"
                title: 1
            }
            ListElement {
                description: "Alarm 6"
                ledColor: "#ffffff"
                title: 0
            }
            ListElement {
                description: "Alarm 7"
                ledColor: "#ffffff"
                title: 0
            }
            ListElement {
                description: "Alarm 8"
                ledColor: "#ffffff"
                title: 0
            }
            ListElement {
                description: "Alarm 9"
                ledColor: "#ffffff"
                title: 0
            }
        }
    
    
        }
    }
    }
    
    

Log in to reply