How to create a Grid inside of a Tab?

Alper

Hi
I have a grid with dynamic contents and i want it appears inside of a grid.
This is my code.

// This is TabView
    TabView {
        id: frame
        anchors.fill: someRect
        anchors.margins: 4

        Tab {
            id: tab1
            title: "tab1 title"
        }
        Tab {
            id: tab2
            title: "tad2 title"
        }
 
        style: TabViewStyle {
            frameOverlap: 1
            tab: Rectangle {
                color: "transparent"
                border.color:  "steelblue"
                implicitWidth: Math.max(text.width + 4, 80)
                implicitHeight: 20
                radius: 2
                Text {
                    id: text
                    anchors.centerIn: parent
                    text: styleData.title
                    color: styleData.selected ? "white" : "black"
                }
            }
            frame: Rectangle { color: "transparent" }
        }
    }
...
...
// This is the Grid
        Grid  {
            objectName: "sidebarView"
            id: myGrid
            columns: 3
        }
    ScrollView {
        contentItem :myGrid
    }

Contents of myGrid can be scrolled.
i can do it in main window, but i want it be inside of a Tab.
it can do what i need in main window:

    Flickable {
        id:flk
        anchors.fill: parent
        contentHeight: myGrid.height
        contentWidth: myGrid.width

        Grid  {
            id: myGrid
            columns: 3
        }
   }
    ScrollView {
        contentItem :myGrid
    }

When the program is runnig, some items dynamically load into the grid.
How it can be appeared in tab1?

Thanks in advance

p3c0

Hi @Alper,

Tab inherits Loader so have access to all its properties. So to load something inside tab dynamically you can use source or sourceComponent.
For eg.:

Component {
        id: comp
        Grid {
            columns: 2
            spacing: 2
            Rectangle { color: "red"; width: 50; height: 50 }
            Rectangle { color: "magenta"; width: 10; height: 10 }
        }
    }

//to add inside tab
tab1.sourceComponent = comp // tab1 is id of Tab inside TabView

Alper

@p3c0
thanks for your reply.
your code worked but it just loaded the rectangles.
i use this statement to load somFile.qml into grid:

                var component = Qt.createComponent("someFile.qml");
                var object= component.createObject(myGrid);

When the statement executes, i get an error:
ReferenceError: myGridID is not defined

p3c0

@Alper
Are you sure you code contains myGridID or is it just myGrid ?

Alper

@p3c0
Sorry. i inserted it by typing, not copied. it was a mistake, i edited it.

Yes in code it has same id for grid

Component {
        id: comp       
Grid  {
            id: myGrid
            columns: 3
        }
}

and:

var component = Qt.createComponent("someFile.qml");
var object= component.createObject(myGrid);

p3c0

@Alper In that case you will need to move the component creation code inside Grid or inside Component.

Alper

Not worked. same error.

p3c0

@Alper Ok. Can you post a minimal complete running example that can reproduce the problem ?

Alper

@p3c0

This is minimal code before your first reply:
main.qml

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import QtQml.Models 2.2
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    Button {
        text: "Load Component"
        onClicked: compoLoade.createCompWindow()
        x:500
    }
    Item {
        id: compoLoade
        function createCompWindow(){
            {
                var component = Qt.createComponent("qrc:/SomeComp.qml");
                var radioPanelObject  = component.createObject(myGrid);//, {"x": 0, "y": 0});
            }
        }
    }
    TabView {
        Tab {
            id:tab1
            Flickable {
                id:flk
                anchors.fill: parent
                contentHeight: myGrid.height
                contentWidth: myGrid.width
                Grid  {
                    id: myGrid
                    columns: 3
                }
            }
            ScrollView {
                contentItem :flk
                width: parent.width*.8
                height: parent.height*.8
                x:myGrid.x
                y:myGrid.y
            }
            title: "Red"
            Rectangle { color: "red" }
        }
        Tab {
            title: "Blue"
            Rectangle { color: "blue" }
        }
        Tab {
            title: "Green"
            Rectangle { color: "green" }
        }
    }
}

SomeComp.qml:

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.2
import QtQuick.Extras 1.4

Item {
    z:0
    property var clickPos
    MouseArea {
        anchors.fill: parent
        property int mousePresed: 0
        onPressed: {
            clickPos  = Qt.point(mouse.x,mouse.y)
            mousePresed = 1
        }
        opacity: 0
        onPositionChanged:   {
            if(mousePresed==1){
                var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
                pi.x += delta.x;
                pi.y += delta.y;
            }
        }
        onReleased: mousePresed = 0
    }
    width: 100
    height: 100
    Rectangle {
        id:rc
        width: 80
        height: 80
        color: "cyan"
        border.color: "black"
    }
    Button {
        text: "Close"
        onClicked: parent.destroy()
    }
}

p3c0

@Alper Well in this case Grid cannot be accessed directly. Try:
tab1.item.contentItem

Alper

@p3c0 Thanks for your help.
it worked but i lost scrollbar.

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import QtQml.Models 2.2
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    Button {
        text: "Load Component"
        onClicked: compoLoade.createCompWindow()
        x:500
    }
    Item {
        id: compoLoade
        function createCompWindow(){
            {
                var component = Qt.createComponent("qrc:/SomeComp.qml");
                var radioPanelObject  = component.createObject(tab1.item);
            }
        }
    }
    TabView {
        id:tbV
        Tab {
            active: true
            id:tab1
                Grid  {
                    objectName: "mGrid"
                    id: myGrid
                    columns: 3
                    width: 200
                    height: 200
                }
            title: "Red"
        }
        Tab {
            title: "Blue"
            Rectangle { color: "blue" }
        }
        Tab {
            title: "Green"
            Rectangle { color: "green" }
        }
    }
}

p3c0

@Alper Well earlier you had Flickable which contained Grid. Then you can use Scrollbar inside Flickable. It needs Qt.labs.controls 1.0