Create QML Items out of DelegateModel - qt

Is it possible to create QML Items out of a DelegateModel?
Here is a example DelegateModel:
DelegateModel
{
id: delegateModel
model: ListModel
{
ListElement { name: "#FAFAFA"; test: "object1" }
ListElement { name: "#000000"; test: "object2" }
}
delegate: Rectangle
{
objectName: test
width: 50
height: 50
color: name
}
Component.onCompleted:
{
Utils.var_dump(items,3)
items.create(0)
Utils.var_dump(items.get(0),3)
}
}
The Result should look like this:
Rectangle
{
objectName: "object1"
width: 50
height: 50
color: "#FAFAFA"
}
Rectangle
{
objectName: "object2"
width: 50
height: 50
color: "#000000"
}
For every ListElement there is a created delegate with the inserted ListElement data.

You can do that with anything that is usable to instantiate a Model (a View)
For example you could use it as a model for a ListView, a GridView or a Repeater. As the model provides the delegate on its own, you do not need to specify any delegate in the View, that instantiates it.
Column {
Repeater {
model: delegateModel
// delegate: ... <--- Nothing here! Uses the delegate from the Model.
}
}
If you use the create(index)-Method, the delegate will be created, but has no parent, so it is not displayed. So you need to set the parent, to have it shown:
Button {
onClicked: {
for (var a = 0; a < dm.items.count; a++) {
var o = dm.items.create(a)
o.parent = r
}
}
}
You need to be aware, that the DelegateModel (without Package and Parts) can't be used in multiple views, as each entry/delegate can be instantiated only once at the same time. If you want to have that,
consider using a QSortFilterProxyModel to filter the stuff, and use as much Views that provide their own delegates, as you want.

Related

How to fetch the ListElement associated with the row which is clicked in a TableView in QML?

I have a TableView defined in my QML which will obviously have multiple rows populated by a ListModel.
I want to fetch the ListElement associated with the row which is double clicked.
I have my rowDelegate of the table view defined as such:
rowDelegate: Rectangle {
color: "#D3D3D3"
height: 30
MouseArea {
anchors.fill: parent
onDoubleClicked: {
console.log("table view row clicked...")
// How to fetch the ListElement associated with the row
// and return it for use by another module?
}
}
}
My comment pretty much emphasises what I'm looking for.
You probably don't even need a MouseArea to handle the click in your delegate.
The TableView already has a doubleClicked signal that you can use to retrieve the model data from the clicked row index:
TableView {
model: ListModel {
ListElement {
name: "name 1"
}
ListElement {
name: "name 2"
}
}
TableViewColumn {
title: "name"
delegate: Text {
text: model.name
}
}
rowDelegate: Rectangle {
color: "#D3D3D3"
height: 30
// no MouseArea
}
// handle the click directly in TableView
onDoubleClicked: {
const element = model.get(row)
console.error("doubleClicked on", element.name)
}
}
In scope of your delegate you can use model pseudo-property to fetch associated ListElement (or any other piece of data which is displayed via that delegate). You may think of it as a reference to original data item. It has all properties of ListElement (for example text or color or whatever) and also index property (index of item in your ListModel or any other model).

How to reuse a nested listview's delegate?

I have a nested listview structure where the delegate listview will contain another listview. I would like the nested listview's delegate to refer to itself because the nested listview will contain the same type of item as itself, but this doesn't appear to work.
Component {
id: subSequenceComponent
ItemDelegate {
id: subSequenceItemDelegate
property var id: edit.id
ColumnLayout {
Text{
text: edit.name
}
ListView {
width: 180; height: 200
model: items.subModelFromId(subSequenceItemDelegate.id)
delegate: subSequenceComponent
}
}
}
}
This works:
Component {
id: subSequenceComponent
ItemDelegate {
id: subSequenceItemDelegate
property var id: edit.id
ColumnLayout {
Text{
text: edit.name
}
ListView {
width: 180; height: 200
model: items.subModelFromId(subSequenceItemDelegate.id)
delegate: Text{
text: edit.name
}
}
}
}
}
Is there a way to reuse the same delegate you are a part of?
It may be connected to this bug. Basically, QML has some checks that are supposed to prevent accidental infinite recursions, but they are not particularly well implemented, and trigger false positives even for scenario where nesting is intended and there is no danger of infinite recursion.
If that is the case, then you can trick that check by using an additional Loader that will load the component from a string, which will not catch the nesting recursion.

Access ListView model within the Repeater component in the delegate

I am using a ListView with a model and a delegate.
The model is a simple ListModel with three items. Each item has a value with the key myFirstRole.
The delegate contains a Repeater component to create an arbitrary number of Labels. The Labels have to use data from the model.
The model of the repeater can not be set to the Listview's model as I have the Repeater using other data.
Here is a minimal example of what I am trying to achieve:
//MyDelegate.qml
Component {
Item {
id: root
width: childrenRect.width
height childrenRect.height
Repeater {
model: 5 //It's not an option to set the repeaters model to the ListViews model. This example just illustrates my problem.
Label {
text: root.ListView.view.model.myFirstRole //This is the line where I want to be able to access the ListView's model, but I can't figure out how to properly reefer to it.
}
}
}
}
//MyListView.qml
ListView {
id: root
delegate: MyDelegate {}
model: ListModel {
ListElement {
myFirstRole: "one"
}
ListElement {
myFirstRole: "two"
}
ListElement {
myFirstRole: "three"
}
}
}
Using Qt 5.7.0 with MSVC2015 32bit
I think that you can't access the roles via the special model property mentioned here (which is what I'm assuming you were trying to do) from the scope of the Repeater. Instead, you can declare a property at the root level of the component that can then be used in nested scopes:
import QtQuick 2.6
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
ListView {
anchors.fill: parent
model: ListModel {
ListElement { myFirstRole: "Dog" }
ListElement { myFirstRole: "Cat" }
}
delegate: Item {
id: root
width: childrenRect.width
height: childrenRect.height
property string myFirstRoleData: myFirstRole
Repeater {
model: 5
Text {
text: myFirstRoleData
}
}
}
}
}
This might get a bit tedious if you have a lot of properties though. From some quick playing around, it looks like it's also possible to store the entire model object in a property:
import QtQuick 2.6
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
ListView {
anchors.fill: parent
model: ListModel {
ListElement { myFirstRole: "Dog" }
ListElement { myFirstRole: "Cat" }
}
delegate: Item {
id: root
width: childrenRect.width
height: childrenRect.height
property var modelData: model
Repeater {
model: 5
Text {
text: root.modelData.myFirstRole
}
}
}
}
}
modelData is probably not the best name to use though, seeing as Qt uses that name for models with only one role, but... if you're going with this approach, you're gonna have more than one role anyway. :)
It looks like Qt Quick Controls' (1) Tumbler does this too.
//MyDelegate.qml
Item {
id: root
property var listViewModel // pass the model data to here
width: 100
height: 50
Column {
Repeater {
model: 5 // Use a different model here
Text {
width: 50
height: 10
text: listViewModel.myFirstRole //This is the line where I want to be able to access the ListView's model, but I can't figure out how to properly reefer to it.
}
}
}
}
//MyListView.qml
ListView {
id: root
width: 100
height: 500
delegate: MyDelegate {
listViewModel: model // set the model data here
}
model: ListModel {
ListElement {
myFirstRole: "one"
}
ListElement {
myFirstRole: "two"
}
ListElement {
myFirstRole: "three"
}
}
}
See the comments in the code. It is not trivial to guess what you want to achive, but I hope I guessed right.

Qt/QML: How to refer to a component/object from a GridView's model's ListElement

I have a GridView with a delegate that is supposed to use a Loader to load and display components which are defined in the same QML file.
Let's say I have a GridView like this:
GridView {
delegate: Rectangle {
Loader { sourceComponent: model.pageContents }
}
model: ListModel {
ListElement { /* how do I reference any of the components defined below from here, so the Loader can actually load and display it... ? */ }
}
}
Component {
id: page_01
Rectangle {
color: "red"
// Page contents for page 1 go here.
}
}
Component {
id: page_02
Rectangle {
color: "red"
// Page contents for page 2 go here.
}
}
I know I can create QML objects and components from Strings, external files and URLs. But I'd like to ideally do something like this:
ListModel {
ListElement { pageContents: page_01 }
ListElement { pageContents: page_02 }
}
I'd prefer to keep everything in a single QML file, so I can easily transfer and store it on the device without having to worry about resolving external dependencies, etc.
How do I refer to components in the same QML file from within ListElements?
Due to ListElement values limitation you cannot just put item id here. But you easily can use some external storage, for example property to store pointers to your pages. In example below I use array with pages ids and an index to wanted page as ListElement data:
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
visible: true
width: 600
height: 600
GridView {
id: grid
anchors.fill: parent
property var pages: [page_01, page_02]
model: ListModel {
ListElement { pageIndex: 0 }
ListElement { pageIndex: 1 }
}
delegate: Loader { sourceComponent: grid.pages[pageIndex] }
}
Component {
id: page_01
Rectangle {
color: "red"
width: 100
height: 100
Component.onCompleted: console.log("page_01 was created")
}
}
Component {
id: page_02
Rectangle {
color: "blue"
width: 100
height: 100
Component.onCompleted: console.log("page_02 was created")
}
}
}

ListElements (ListModel) defined in other qml files?

I got a fonctionnal ListModel defined like this :
ListModel {
id: leftGrid
ListElement { icon: "Images/1.png" }
ListElement { icon: "Images/2.png" }
}
The thing is that I'd like to define ListElement in separate qml files but I really don't know how to do it...
I wrote the qml like this :
//myWidget.qml
import QtQuick 1.0
ListElement {
icon: "Images/X.png"
}
But I don't know how to "invoke" or "instanciate" it in my main file...
I tried :
ListModel {
id: leftGrid
ListElement { icon: "Images/1.png" }
myWidget //qml file
}
and :
ListModel {
id: leftGrid
ListElement { icon: "Images/1.png" }
ListElement { myWidget }
}
Both doesn't work...
Any help with be welcomed, thanks in advance.
I don't think it's possible to have ListElements as separate files. This is because when you do that you are implicitly creating a Component, with your contents inside (in this case the ListElement). However the ListModel can only accept ListElements as its children, not Components with nested ListElements inside.
What you can do however to dynamically define your model items is to declare a ListModel, then add your data via a piece of javascript, for example in your Component.onCompleted handler.
If you look at the API for ListModel you will see it has an append() method, among others.
You can pass a JS dictionary to this method and it will add a new ListElement to the list and populate its properties according to the dictionary.
Example:
import QtQuick 1.0
Rectangle {
width: 360
height: 360
ListView {
id:list
anchors.fill: parent
model: ListModel {
ListElement { foo: "hello" }
}
delegate: Text {
text: foo
width: ListView.view.width
}
Component.onCompleted: {
list.model.append({ "foo": "world" })
}
}
}
Your list will appear with two items in it: "hello" and "world"

Resources