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



Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.