[Solved]Drop-ups in QML ?
-
We are trying to have drop-ups in one of our screens, but we are able to get drop down instead of drop-up.
Any suggestions how to go for that effect with Listview implementation.Reference for our requirement "Drop-up example":http://www.pmob.co.uk/temp/dropup.htm
Below is the tried Code snippet:
@import QtQuick 1.1
Rectangle {
width: 800
height: 480Rectangle { id:comboBox property variant items: ["Item 1", "Item 2", "Item 3"] signal comboClicked; x: 653 y: 420 width: 141 height: 30; z: 100; smooth:true; Rectangle { id:chosenItem radius:4; width:parent.width; height:comboBox.height; color: "#454b4d" smooth:true; Text { anchors.top: parent.top; anchors.margins: 8; id:chosenItemText x: 11 y: 5 color: "#ffffff" text:"Menu"; anchors.topMargin: 5 anchors.left: parent.left anchors.leftMargin: 12 font.family: "Arial" font.pointSize: 14; smooth:true } MouseArea { width: 400 height: 30 anchors.bottomMargin: 0 anchors.fill: parent; onClicked: { comboBox.state = comboBox.state==="dropDown"?"":"dropDown" } } } Rectangle { id:dropDown width:comboBox.width; height:0; clip:true; radius:4; anchors.top: chosenItem.bottom; anchors.margins: 2; color: "lightblue" ListView { id:listView height:500; model: comboBox.items currentIndex: 0 delegate: Item{ width:comboBox.width; height: comboBox.height; Text { text: modelData anchors.top: parent.top; anchors.left: parent.left; anchors.margins: 5; } MouseArea { anchors.fill: parent; onClicked: { comboBox.state = "" } } } } } states: State { name: "dropDown"; PropertyChanges { target: dropDown; height:30*comboBox.items.length } } transitions: Transition { NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 } } }
}@
-
Hello,
A simple solution that can be applied to your code is done by using the rotation keyword which is a property inherited by any QML Element from the Item base Element.
Here is the code that does the trick ;)@
import QtQuick 1.0Rectangle {
width: 800 height: 480 Rectangle { id:comboBox rotation: 180 /* first rotation */ property variant items: ["Item 1", "Item 2", "Item 3"] signal comboClicked; x: 653 y: 420 width: 141 height: 30; z: 100; smooth:true; Rectangle { id:chosenItem radius:4; width:parent.width; height:comboBox.height; color: "#454b4d" smooth:true; Text { rotation: 180 /* second rotation */ anchors.top: parent.top; anchors.margins: 8; id:chosenItemText x: 11 y: 5 color: "#ffffff" text:"Menu"; anchors.topMargin: 5 anchors.left: parent.left anchors.leftMargin: 12 font.family: "Arial" font.pointSize: 14; smooth:true } MouseArea { width: 400 height: 30 anchors.bottomMargin: 0 anchors.fill: parent; onClicked: { comboBox.state = comboBox.state==="dropDown"?"":"dropDown" } } } Rectangle { id:dropDown width:comboBox.width; height:0; clip:true; radius:4; anchors.top: chosenItem.bottom; anchors.margins: 2; color: "lightblue" ListView { id:listView height:500; model: comboBox.items currentIndex: 0 delegate: Item{ rotation: 180 /* last rotation */ width:comboBox.width; height: comboBox.height; Text { text: modelData anchors.top: parent.top; anchors.left: parent.left; anchors.margins: 5; } MouseArea { anchors.fill: parent; onClicked: { comboBox.state = "" } } } } } states: State { name: "dropDown"; PropertyChanges { target: dropDown; height:30*comboBox.items.length } } transitions: Transition { NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 } } }
}
@Let me know if it works by your side.
Regards.
-
Hello.
Good question actually. In the normal case, QML basically uses the top down approach for listviews. This a default dehavior for any Listview you will create. On the other end, it offers you the possibility to inverse the behavior as you pleased. In your case, you need to rotate each Element to provide at the end a consistent final result. In the solution I gave you, I first rotated the delegate to have a kind of mirrored Listview. And I rotated the result to have it mirrored again. the second rotation is only for the text rotation. You can deep dive into the "Item Base Element":http://http://qt-project.org/doc/qt-4.8/qml-item.html#rotation-prop to better understand.
Don't hesitate for further questions.
Regards.