Dynamically creating a new list as an element of a new item in the main list
-
Hello guys,
I need your help, I can't find the answer to my question anywhere, nor any example of how to do it. I am creating an application in which I can create budget plans and control costs. So I have two lists: budgetPlansList and costsList.Goal scenario:
I create a new budget plan, which is an element of the main list, then after clicking on this element on the list, I would like to change the application page (which is in another qml file) where a new list of expenses will appear, where I can add expenses (so that each budget plan has its own separate list of costs)For now, I have 1 list for budgetPlans and one list for costs and I can not connect them. Is it possible to realize my goal scenario somehow?
My code in qml (If it's needed I can add c++ files content):
main.qmlimport QtQuick import QtQuick.Window import QtQuick.Controls import QtQuick.Layouts import QtQuick.Dialogs import BudgetPlanM 1.0 import CostM 1.0 ApplicationWindow { id: appWindow width: Screen.width height: Screen.height visible: true title: qsTr("CashController") FontLoader { id: insomniaFont source: Qt.resolvedUrl("D:\QtMobileApps\CashController\CashController\fonts\android-insomnia-font\misc\androida_insomnia.ttf") } Dialog { id: newBudgetPlanDialogWindow title: "New budget plan" anchors.centerIn: parent Column { anchors.fill: parent Text { text: "Enter a name of a new budget plan" } TextField { id: budgetPlanNameInput implicitWidth: 200 implicitHeight: 30 validator: RegularExpressionValidator {regularExpression: /^[A-Za-z0-9_.]+$/} } Text { text: "Set maximum cash budget for this plan" } TextField { id: budgetPlanBudgetInput anchors.centerIn : inputArea font.family : "Helvetica" font.pixelSize: textSize implicitWidth: 200 implicitHeight: 30 color: "black" smooth: true validator : DoubleValidator { decimals: 2 top: 999999 bottom: -999999 } readOnly: isReadOnly } } onAccepted: { budgetPlansList.appendItem(budgetPlanNameInput.text, budgetPlanBudgetInput.text) } footer: DialogButtonBox { id: buttons standardButtons: Dialog.Ok | Dialog.Cancel } } Component { id: plansListViewComponent Rectangle { id: plansListViewComponentBackground width: plansListView.width height: 25 color: index % 2 == 0 ? "#dcd1a6" : "#ccc197" RowLayout { id: listRow spacing: 50 height: plansListViewComponentBackground.height Text { id: planNameTextInRowList text: model.name font.bold: true font.pointSize: 10 Layout.leftMargin: 5 } Text { id: planCostsTextInRowList text: Number(model.sumOfCosts).toFixed(2) + "/" +Number(model.budget).toFixed(2) font.bold: true font.pointSize: 10 Layout.rightMargin: 5 } MouseArea { anchors.fill: parent onClicked:{ var component = Qt.createComponent("CostsListView.qml") var window = component.createObject() window.show() } } } } } Rectangle { id: homeBackground anchors.centerIn: parent color: "#233e59" width: appWindow.width height: appWindow.height ColumnLayout{ id: homeLayout width: appWindow.width height: appWindow.height anchors.centerIn: parent Text { id: applicationNameLabel1 text: qsTr("Cash") height: homeLayout.height * 0.05 font.pointSize: homeLayout.height * 0.05//AppSettings.fontSize + 200 font.bold: true font.family: insomniaFont.name color: "#dcd1a6" horizontalAlignment: Text.AlignHCenter Layout.alignment: Qt.AlignHCenter Layout.topMargin: 60 } Text { id: applicationNameLabel2 text: qsTr("Controller") height: homeLayout.height * 0.05 font.pointSize: homeLayout.height * 0.05 font.bold: true font.family: insomniaFont.name color: "#dcd1a6" horizontalAlignment: Text.AlignHCenter Layout.alignment: Qt.AlignHCenter Layout.topMargin: 2 } Button { id: newPlanButton text: qsTr("+") Layout.topMargin: 60 onClicked: { newBudgetPlanDialogWindow.open() } Layout.alignment: Qt.AlignHCenter contentItem: Text { text: newPlanButton.text font: newPlanButton.font opacity: enabled ? 1.0 : 0.3 color: newPlanButton.down ? "#dcc1a6" : "#dcd1a6" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { opacity: enabled ? 1 : 0.3 border.color: newPlanButton.down ? "#dcc1a6" : "#dcd1a6" border.width: 2 radius: 180 color: "#233e59" } } ListView { id: plansListView Layout.topMargin: 5 model: BudgetPlanModel { id: budgetPlanModel list: budgetPlansList } width: homeLayout.width * 0.9 height: homeLayout.height / 2 Layout.alignment: Qt.AlignHCenter delegate: plansListViewComponent boundsBehavior: Flickable.StopAtBounds clip: true Rectangle { id: overlay anchors.centerIn: parent.contentItem border.width: 10 border.color: "#233e59" width: parent.contentItem.width + border.width * 2 height: parent.contentItem.height + border.width * 2 radius: border.width * 2 color: "transparent" } } } } }CostsListView.qml
import QtQuick import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import CostM 1.0 import BudgetPlanM 1.0 Window { ColumnLayout { Component { id: plansListViewComponent Rectangle { id: plansListViewComponentBackground width: plansListView.width height: 25 color: index % 2 == 0 ? "#dcd1a6" : "#ccc197" RowLayout { id: listRow spacing: 20 height: plansListViewComponentBackground.height Text { id: planNameTextInRowList text: model.name font.bold: true font.pointSize: 10 Layout.leftMargin: 5 } Text { id: currentCostsTextInRowList text: model.category font.bold: true font.pointSize: 10 } Text { id: planCostsTextInRowList text: Number(model.price).toFixed(2) font.bold: true font.pointSize: 10 } Text { id: plannedPriceTextInRowList text: Number(model.plannedPrice).toFixed(2) font.bold: true font.pointSize: 10 } Text { id: shopTextInRowList text: model.shop font.bold: true font.pointSize: 10 } Text { id: buyerTextInRowList text: model.buyer font.bold: true font.pointSize: 10 } MouseArea { anchors.fill: parent onClicked:{ var component = Qt.createComponent("Main.qml") var window = component.createObject() window.show() } } } } } Rectangle { id: homeBackground anchors.centerIn: parent color: "#233e59" width: appWindow.width height: appWindow.height ColumnLayout{ id: homeLayout width: appWindow.width height: appWindow.height anchors.centerIn: parent spacing: 20 Button { id: newCostButton text: qsTr("+") onClicked: {} Layout.alignment: Qt.AlignHCenter contentItem: Text { text: newPlanButton.text font: newPlanButton.font opacity: enabled ? 1.0 : 0.3 color: newPlanButton.down ? "#dcc1a6" : "#dcd1a6" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { opacity: enabled ? 1 : 0.3 border.color: newCostButton.down ? "#dcc1a6" : "#dcd1a6" border.width: 2 radius: 180 color: "#233e59" } } ListView { id: plansListView model: CostModel { id: costModel list: costsList } width: homeLayout.width * 0.9 height: homeLayout.height / 2 Layout.alignment: Qt.AlignHCenter delegate: plansListViewComponent boundsBehavior: Flickable.StopAtBounds Rectangle { id: overlay anchors.centerIn: parent.contentItem border.width: 3 border.color: "black" width: parent.contentItem.width + border.width * 2 height: parent.contentItem.height + border.width * 2 radius: border.width * 2 color: "transparent" } } } } } }