Hi,
I have the following AppListView (from an example):
import Felgo 3.0
import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.LocalStorage 2.12
import "Database.js" as JS
App {
Rectangle {
id: bckgrnd
color: "lightblue"
anchors.fill: parent
AppListView {
id: myListView
model: [{
"letter": "A"
}, {
"letter": "B"
}, {
"letter": "C"
}, {
"letter": "D"
}, {
"letter": "E"
}, {
"letter": "F"
}, {
"letter": "G"
}, {
"letter": "H"
}, {
"letter": "I"
}, {
"letter": "J"
}, {
"letter": "K"
}, {
"letter": "L"
}, {
"letter": "M"
}, {
"letter": "N"
}, {
"letter": "O"
}, {
"letter": "P"
}, {
"letter": "Q"
}, {
"letter": "R"
}, {
"letter": "S"
}, {
"letter": "T"
}, {
"letter": "U"
}, {
"letter": "V"
}, {
"letter": "W"
}, {
"letter": "X"
}, {
"letter": "Y"
}, {
"letter": "Z"
}]
// one sub-array for each list item
// property var subsectionModel: [[{
// "word": "Apple"
// }, {
// "word": "Ananas"
// }], [{
// "word": "Banana"
// }, {
// "word": "Ball"
// }, {
// "word": "Balloon"
// }], [{
// "word": "Clock"
// }], [{
// "word": "Dog"
// }, {
// "word": "Donut"
// }, {
// "word": "Dollar"
// }] // etc. etc., for demo purposes only list first few entries
// ]
spacing: dp(20) // to have some space between list items
delegate: Item {
x: dp(10) // left margin
// the height is bigger if the subsection is visible
height: letterText.height + (subsectionColumn.visible ? subsectionColumn.height : 0)
width: parent.width // set width of whole ListView, makes clicking with MouseArea easier
AppText {
id: letterText
text: modelData.letter
font.bold: true // make it bold
}
MouseArea {
// fill the whole area, so if a subsection is clicked it will be unfolded
anchors.fill: parent
onClicked: {
// unfold subsection here
console.debug("letter clicked:", modelData.letter)
subsectionColumn.visible = !subsectionColumn.visible // toggle subsection visibility when clicked
}
}
//This needs to be modified
Column {
id: subsectionColumn
anchors.top: letterText.bottom // position below letterText area
anchors.topMargin: dp(10)
visible: false // start invisible, only show when clicked
spacing: dp(10)
Repeater {
model: ListModel {
id: listModel
}
// automatically set the model here, we could also set the model dynamically when clicking to load later
delegate: AppText {
text: model.wordField
color: index % 2 === 1 ? "red" : "blue" // alternate red & blue color
}
} // Repeater
} // Column
} //List Delegate
} //ListView
}
Component.onCompleted: {
JS.dbGetWordList()
}
}
I need to display words from an SQLite db alphabetically. My problem is, that if I add
model: ListModel {
id: listModel
}where it is now, the Database.JS can’t see it. If I place it directly under AppListView the Database.JS can “see it, but I get a “Duplicate property binding” error. What is the best way to solve this? Thank you for your help.
