Suppose I had the Component
Component {
id: myComp1
Item {
id: item
ListView {
id: listView
model : ListModel { id: listModel }
delegate : RowLayout { /* display model data*/ }
Component.onCompleted {
// get data from server ...
model.append(dataFromServer)
}
}
}
}
Then I have a second Component, which is another page in the stack, and I want to use this component to update mycomp1, i.e:
Component {
id: myComp2
Button {
onClicked: {
myComp1.item.listView.listModel.append(someNewData) // want to be able to do this
}
}
}
And these components are tied together in a StackView
Now, this doesnt seem to work since myComp2 cant seem to access the necessary scope to update the model of myComp1. Is there any way around this?
Thanks for the help.
The problem is that a Component is like a type declaration. It does not define an instance of an object, so you cannot access its members.
You could pull the ListModel outside of that Component so that both Components can access it.
ListModel {
id: listModel
}
Component {
id: comp1
ListView { model: listModel }
}
Component {
id: comp2
Button {
onClicked: { listModel.append(someNewData) }
}
}
Related
i want to add a Component dynamically to an ColumnLayout in a TabView/Tab. But i've not found a possibility to do this. The problem is that i have no correct parent reference to my ColumnLayout for the createObject call.
Because the Tab dynamically loads a Component I've encapsulated the ColumnLayout in a Component.
In the QML Debugger i can solve the following path: objForm.tabView.tabStatus.tabStatusLoader.colLayout, but i cant use this as an correct parent.
It seems not be in the scope.
TypeError: Cannot read property 'tabStatus' of undefined
ObjForm.ui.qml
Item {
id: item1
width: 400
height: 400
property QtObject object
property Component compLayout
TabView {
id: tabView
anchors.fill: parent
Tab {
id: tabStatus
title: "status"
Loader {
id: tabStatusLoader
sourceComponent: compLayout
}
}
}
}
ObjForm.qml
ObjectViewForm {
id: objForm
anchors.fill: parent
object: someObj
compLayout: Component {
id: layoutComp
ColumnLayout {
id: colLayout
spacing: 2
}
}
onObjectChanged: {
// Here i want to add the someLabel Component to the ColumnLayout
someLabel.createObject(*PARENT*)
}
Component {
id: someLabel
Row {
property string text
property string label
spacing: 5
Label {
text: parent.label
}
Label {
text: parent.text
}
}
}
Does anyone know how to solve this or can make a better suggestion?
ok I've found a solution by myself. Instead to include the ColumnLayout into the Component, i've pulled it out and made an alias property to publish it. With this it was possible to add objects to my ColumnLayout. But the ColumnLayout got the wrong parent(objForm) instead of the Component.
A Component cant be a parent because a QQuickItem* is expected instead of a QObject* and additional can't include properties except for 'id'. Therefore a dummy Item was needed.
To reparent the ColumnLayout the Item needs a Component.onCompleted function where the parent will be set.
ObjectViewForm {
id: objForm
anchors.fill: parent
object: someObj
property alias componentLayout: colLayout
compLayout: Component {
id: layoutComp
Item {
id: dummy
Component.onCompleted: {
colLayout.parent = dummy
}
}
}
ColumnLayout {
id: colLayout
spacing: 2
}
I am trying to build an interactive map application which allow me to add and modify Map Items. I am able to add new map item but I still have problem to modify the model. On the code below, if I have more than one item, the remove function always delete the first item crated not the current item selected. I want to modify the model not only the view of the model, but how can I get the currentIndex of the model ?
ListModel {
id: mapModel
}
Map {
id: map
//...
MapItemView {
model: mapModel
delegate: MapCircle {
radius: 80000
color: 'blue'
center {
latitude: lat
longitude: longi
}
MouseArea {
onClicked: {
mapModel.remove(model.index)
}
}
}
}
MouseArea {
anchors.fill: parent
onClicked: {
var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y))
mapModel.append({lat : coord.latitude, longi: coord.longitude});
}
}
}
Found the answer myself. Just use mapModel.remove(index) instead of mapModel.remove(model.index)
Inside the delegate, I bind Image's source property to ListView's currentIndex which determines which image to load. This works great:
ListView {
id: answerListView
model: 5
currentIndex: -1
delegate: answerDelegate
}
Component {
id: answerDelegate
Item {
width: 100
height: 100
Image {
source: answerListView.currentIndex === index
? "selected.png" : "not_selected.png"
}
MouseArea {
anchors.fill: parent
onClicked: {
answerListView.currentIndex = index
}
}
Component.onCompleted: {
answerListView.currentIndex = 1; // doesn't work!!
}
}
}
Since currentIndex: -1, it will always show not_selected.png. To show selected.png, I change currentIndex in Component.onLoaded inside delegate.
I was expecting image to load selected.png since currentIndex was updated.
What is the correct way and what am I misunderstanding here?
Ok, new guess:
You want to have the posibility to select multiple Items. As currentIndex only stores one value, which is the value you assigned it last, you can use it to mark only one Item.
Therefore you need to find another way to store your selection. You might for example have a property in the delegate: property bool selected: false which you set to true upon selection.
The problem with this solution is, that it only works if all Items are instantiated at all times. As soon as one Item will be destroyed again, the information will be lost, and uppon the next creation, the selection/unselection is undone.
The better way would be to introduce a role in your model, that stores the selection outside of the non-persistant delegates for you:
ListView {
id: answerListView
model: lm
delegate: answerDelegate
width: 100
height: 220
}
ListModel {
id: lm
ListElement { selected: false }
ListElement { selected: false }
ListElement { selected: false }
ListElement { selected: false }
ListElement { selected: false }
}
Component {
id: answerDelegate
Item {
width: 100
height: 100
Image {
anchors.fill: parent
source: model.selected ? "selected.png" : "notselected.png"
}
Text {
text: (model.selected ? 'selected ' : 'notselected ')
}
Component.onCompleted: {
model.selected = true // doesn't work!!
}
MouseArea {
anchors.fill: parent
onClicked: {
model.selected = !model.selected
}
}
}
}
Another option would probably be a ItemSelectionModel, but I don't know atm, how it works.
Otherwise your example works as expected:
The Item with index 1 is shown, and displays the Image selected.png. All other Items are not shown (for the ListView is to small) but if the would be shown, they would show notselected.png for the answerListView.currentIndex is not equal to their index.
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.
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")
}
}
}