Is there a QML type to build an unfolding menu like that:
state1:
state2:
Or do I have to somehow engineer this type by combining other types and logic?
Edit:
This is how I'vew done it. There are of course improvements possible, e.g.anchoring the ScrollView of the tables to the header row, using a Repeater intead of creating objects, modularize the components into seperate files, etc.:
import QtQuick 2.7
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2
ApplicationWindow {
id: rootWindow
visible: true
width: 320
height: 320
Rectangle {
id:base
anchors.fill: parent
color: "#FFFFFFFF"
property var numOfInputs
property var inputcomp
signal currFullInputChanged();
function start() {
currFullInputChanged()
}
Window {
id: win
x: base.anchors.rightMargin
width: 200
height: 200
visible: true
MouseArea {
id: area
anchors.fill: parent
property int count: 0
onClicked: {
inputmod.append({"Key_1": count, "Key_2": count+1})
++count;
base.start()
}
}
}
Component.onCompleted: {
win.show()
}
onCurrFullInputChanged: {
if(typeof inputcomp !== "undefined")
inputcomp.destroy()
numOfInputs = inputmod.count
inputcomp = inputComponent.createObject(this, {"inputRows": numOfInputs})
}
ListModel {
id: inputmod
}
Component {
id: inputComponent
Column {
id: clTop
anchors.fill: parent
width: parent.width
height: parent.height
spacing: 1
property int inputRows
property int lastIndex: -1
property var objs: []
Component {
id: inputitem
Item {
id:item_
width: parent.parent.width
height: parent.parent.height/12
property string clickedColor: "#B4D0B4"
property int currIndex
Rectangle {
id: rectinfo
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: rectexpand.open === 0 ? parent.height : parent.height/4
border.width: 1
border.color: "#E4EEDA"
radius: 2
color: baseColor
property string baseColor: "#FDFFF9"
Text {
anchors.top: parent.top
anchors.left: parent.left
padding: 5
width: parent.width/2
height: parent.height/2
fontSizeMode: Text.Fit
text: "Input " + parseInt(parent.parent.currIndex + 1)
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignTop
wrapMode: Text.WordWrap
elide: Text.ElideRight
font.family: "Helvetica"
font.bold: true
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: {
rectexpand.open = rectexpand.open === 0 ? 1 : 0
item_.height = Qt.binding(function() { return rectexpand.open === 0 ? clTop.height*1/12 : clTop.height*4/12} )
var currIndex = parent.parent.currIndex
if(clTop.lastIndex > -1) {
var lastItem = clTop.objs[clTop.lastIndex];
lastItem.children[0].color = lastItem.children[0].baseColor;
lastItem.children[1].color = lastItem.children[1].baseColor;
lastItem.children[0].opacity = 1
lastItem.children[1].opacity = 1
}
var currItem = clTop.objs[currIndex];
currItem.children[0].color = parent.parent.clickedColor
currItem.children[1].color = parent.parent.clickedColor
currItem.children[0].opacity = 0.5
currItem.children[1].opacity = 0.5
clTop.lastIndex = parent.parent.currIndex
}
}
}
Rectangle {
id: rectexpand
anchors {top: rectinfo.bottom; left: parent.left; bottom: parent.bottom; right: parent.right}
border.width: 1
radius: 0
border.color: "grey"
property string baseColor: "white"
property int open: 0
onOpenChanged: {
if(open === 1)
tabloader.sourceComponent = view;
else
tabloader.sourceComponent = undefined;
}
Component {
id: del
Item {
anchors.left: parent !== null ? parent.left : undefined
anchors.right: parent !== null ? parent.right : undefined
TextInput {
id: textinput
anchors.margins: 4
anchors.left: parent !== null ? parent.left : undefined
anchors.verticalCenter: parent !== null ? parent.verticalCenter : undefined
text: styleData.value
color: styleData.textColor
}
}
}
Component {
id: view
TableView {
anchors.fill: parent
itemDelegate: del
model: inputmod
TableViewColumn {
id: col1
role: "Key_1"
title: "Key 1"
width: parent !== null ? parent.width/2 - 2 : 0
}
TableViewColumn {
id: col2
role: "Key_2"
title: "Key 2"
width: parent !== null ? parent.width/2 - 2 : 0
}
}
}
Loader {
id: tabloader
anchors.fill: parent
}
}
}
}
Component.onCompleted: {
for(var i=0; i<inputRows; ++i) {
objs.push(inputitem.createObject(this, {"currIndex": i}))
}
}
Component.onDestruction: {
for(var i=0; i<inputRows; ++i) {
objs[i].destroy()
}
}
}
}
}
}
