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.
  • A Offline
    A Offline
    Alper
    wrote on 16 May 2016, 07:45 last edited by Alper
    #1

    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

    P 1 Reply Last reply 16 May 2016, 08:18
    0
    • A Alper
      16 May 2016, 07:45

      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

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

      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
      

      157

      A 1 Reply Last reply 16 May 2016, 08:52
      3
      • 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

                          1/12

                          16 May 2016, 07:45

                          • Login

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