You can try with this. Popup is done with opacity here. I have done for only one item. Popups can be done with dynamic object creation as well.
Rectangle {
width: 360
height: 360
ComboBox {
id : cbox
currentIndex: 0
model: ListModel {
id: cbItems
ListElement { text: "CheckBox"; color: "Yellow" }
ListElement { text: "SpinBox"; color: "Green" }
}
width: 200
onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).text + ", " + cbItems.get(currentIndex).color)
anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle {
width: 100
height: 50
color: "red"
visible: true
opacity: 0
anchors.centerIn: parent
id :chk
CheckBox {
id : chk1
visible: true
anchors.centerIn: parent
}
SequentialAnimation {
id: chkAnim
NumberAnimation { target: chk; property:"opacity"; to: 1; duration: 1000 }
PauseAnimation { duration: 2000 }
NumberAnimation { target: chk; property:"opacity"; to: 0; duration: 1000 }
}
}
SpinBox {
decimals: 2
visible: false
}
Rectangle{
id : file
width: 100
height: 40
radius: 10
color : "blue"
border.width: 2
Text {
anchors.centerIn: parent
text : "Click Me"
}
anchors.top: cbox.bottom
anchors.horizontalCenter: cbox.horizontalCenter
anchors.topMargin: 50
MouseArea {
anchors.fill: parent
onClicked: {
console.log(cbItems.get(cbox.currentIndex).text);
var str = cbItems.get(cbox.currentIndex).text;
if (str === "CheckBox")
chkAnim.start()
}
}
}
}
↧