Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to create a Grid inside of a Tab?
QtWS25 Last Chance

How to create a Grid inside of a Tab?

Scheduled Pinned Locked Moved Unsolved General and Desktop
qml grid in tabqml grid insidetabgrid
12 Posts 2 Posters 3.7k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P p3c0
    16 May 2016, 08:18

    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
    
    A Offline
    A Offline
    Alper
    wrote on 16 May 2016, 08:52 last edited by Alper
    #3

    @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

    P 1 Reply Last reply 16 May 2016, 08:56
    0
    • A Alper
      16 May 2016, 08:52

      @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

      P Offline
      P Offline
      p3c0
      Moderators
      wrote on 16 May 2016, 08:56 last edited by
      #4

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

      157

      A 1 Reply Last reply 16 May 2016, 09:02
      0
      • P p3c0
        16 May 2016, 08:56

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

        A Offline
        A Offline
        Alper
        wrote on 16 May 2016, 09:02 last edited by p3c0
        #5

        @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);
        
        P 1 Reply Last reply 16 May 2016, 09:14
        0
        • A Alper
          16 May 2016, 09:02

          @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);
          
          P Offline
          P Offline
          p3c0
          Moderators
          wrote on 16 May 2016, 09:14 last edited by p3c0
          #6

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

          157

          1 Reply Last reply
          1
          • A Offline
            A Offline
            Alper
            wrote on 16 May 2016, 12:10 last edited by
            #7

            Not worked. same error.

            P 1 Reply Last reply 16 May 2016, 12:12
            0
            • A Alper
              16 May 2016, 12:10

              Not worked. same error.

              P Offline
              P Offline
              p3c0
              Moderators
              wrote on 16 May 2016, 12:12 last edited by
              #8

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

              157

              A 1 Reply Last reply 16 May 2016, 13:08
              1
              • P p3c0
                16 May 2016, 12:12

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

                A Offline
                A Offline
                Alper
                wrote on 16 May 2016, 13:08 last edited by
                #9

                @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()
                    }
                }
                
                P 1 Reply Last reply 16 May 2016, 15:03
                0
                • A Alper
                  16 May 2016, 13:08

                  @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()
                      }
                  }
                  
                  P Offline
                  P Offline
                  p3c0
                  Moderators
                  wrote on 16 May 2016, 15:03 last edited by
                  #10

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

                  157

                  A 1 Reply Last reply 17 May 2016, 04:24
                  1
                  • P p3c0
                    16 May 2016, 15:03

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

                    A Offline
                    A Offline
                    Alper
                    wrote on 17 May 2016, 04:24 last edited by
                    #11

                    @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" }
                            }
                        }
                    }
                    
                    P 1 Reply Last reply 17 May 2016, 05:17
                    0
                    • A Alper
                      17 May 2016, 04:24

                      @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" }
                              }
                          }
                      }
                      
                      P Offline
                      P Offline
                      p3c0
                      Moderators
                      wrote on 17 May 2016, 05:17 last edited by
                      #12

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

                      157

                      1 Reply Last reply
                      0

                      12/12

                      17 May 2016, 05:17

                      • Login

                      • Login or register to search.
                      12 out of 12
                      • First post
                        12/12
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved