Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to create a Grid inside of a Tab?



  • 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


  • Moderators

    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
    


  • @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


  • Moderators

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



  • @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);
    

  • Moderators

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



  • Not worked. same error.


  • Moderators

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



  • @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()
        }
    }
    

  • Moderators

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



  • @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" }
            }
        }
    }
    

  • Moderators

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