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.
This is what I currently have.
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 } } } } }