Arrays and structures in QML

[Alper]

@p3c0
The width of container rectangle divides into width of component (number of columns : C) and height of container divides into height of container(number of rows: R).
So i get a table width C columns and R rows, each Row covers y coordinate from y1 to y2 and each Column from x1 to x2.
When a component dragged, its x,y coordinate will be checked to position in suitable place.

for (i = 0 ; i<elementsOfTable;i++)
if(component.x in array[i].x and component.y in array[i].y)
{
setComponentPosition in position i (position i x,y coordinates is in table)
}

i don't want do that in C++.
Another thing i need is a scroll bar in thish manner. i don't know how to add it in this manner. because the Flickable and Grid will be removed.

[p3c0]

@Alper Perhaps an array of point's ?

Another thing i need is a scroll bar in thish manner. i don't know how to add it in this manner. because the Flickable and Grid will be removed.

What type is the container then ?

[Alper]

@p3c0 rectange

an array of ranges of points.

[p3c0]

@Alper Well how do you intend to scroll a rectangle ? Why not Flickable then ?

[p3c0]

@Alper Array of points

var arr = [
            Qt.point(0,30),
            Qt.point(40,32),
            Qt.point(4,3),
            Qt.point(5,6)
        ];

[Alper]

@p3c0 said:

intend

:) i intend to use every thing that does it!
But i don't know HOW!
I tried it but not worked:

    function createComponent(){ //the app calls this function several times when running
        {
            yCoord += 100;    //i used it to check scrolling
            var component = Qt.createComponent("qrc:/MyQML.qml");
            var obj  = component.createObject(flickableContainer, {"x": 0, "y": yCoord });
        }
    }



    Flickable {
        id:flickableContainer
        anchors.fill: parent // parent is a rectangle
        anchors.margins: 5
    }
    ScrollView {
        contentItem :flickableContainer
        width: parent.width
        height: parent.height
        x:flickableContainer.x
        y:flickableContainer.y
    }

[p3c0]

@Alper
Flickable should be inside ScrollView.
For eg:

ScrollView {
    width: 200; height: 200
    Flickable {
        anchors.fill: parent
        contentWidth: image.width; contentHeight: image.height
        Image { id: image; source: "http://placehold.it/650x650&text=\"Qt\"" }
    }
}

And set ScrollView as a parent to dynamic component.
Btw. You can completely replace Flickable with ScrollView.

[Alper]

@p3c0 Thanks for your reply
It works for image as static object/element, how to use it for dynamic component?

[p3c0]

@Alper It seems the scrollbars are not enabled when a component is added to it dynamically. Might be a bug or we are missing something? Will find it out.

[p3c0]

Hi @Alper,
Here is what works.
Use ScrollView instead of Flickable for scrollbars. Then as per this we need to explicitly set the contentItem as this newly created component.
A very minimal example:

import QtQuick 2.6
import QtQuick.Controls 1.4

Item {
    id: root
    width: 200
    height: 200

    ScrollView {
        id: scroll
        anchors.fill: parent
    }

    Button {
        text: "Load"
        onClicked: {
            var component = Qt.createComponent("Dummy.qml");
            var obj  = component.createObject(scroll);
            scroll.contentItem = obj
        }
    }
}

//Dummy.qml

import QtQuick 2.6

Image {
    id: image;
    source: "http://placehold.it/650x650&text=\"Qt\""
}