Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. scroll horizontal and vertical for a very large rectangle
QtWS25 Last Chance

scroll horizontal and vertical for a very large rectangle

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
treeview
3 Posts 2 Posters 797 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.
  • L Offline
    L Offline
    lawrence.emke
    wrote on 29 Jul 2020, 20:24 last edited by
    #1

    I have been playing with the scroll view and other view models.
    I want to create a game board (a very large rectangle) and place pieces
    (which are buttons that can be clicked and dragged) on the rectangle content. The board (i.e. rectangle) could have any dimensions (i.e. larger than the physical size of the device. The user might want to make the view port small (not full screen) I wanted to have scroll bars both horizontal and vertical always visible. That was easy. But they are not functional. The rectangle is physically anchor to the application window. Nothing more can be seen.

    How do I get the scroll bars to change the view of the large rectangle. I would think/hope such a thing would be a general
    widget. i.e.: just choose the widge; define the size of the scroll area
    and have the scroll bars navigate the scroll area accordingly.

    Does not seem to work. Can anyone help?

    O 1 Reply Last reply 29 Jul 2020, 21:12
    0
    • L lawrence.emke
      29 Jul 2020, 20:24

      I have been playing with the scroll view and other view models.
      I want to create a game board (a very large rectangle) and place pieces
      (which are buttons that can be clicked and dragged) on the rectangle content. The board (i.e. rectangle) could have any dimensions (i.e. larger than the physical size of the device. The user might want to make the view port small (not full screen) I wanted to have scroll bars both horizontal and vertical always visible. That was easy. But they are not functional. The rectangle is physically anchor to the application window. Nothing more can be seen.

      How do I get the scroll bars to change the view of the large rectangle. I would think/hope such a thing would be a general
      widget. i.e.: just choose the widge; define the size of the scroll area
      and have the scroll bars navigate the scroll area accordingly.

      Does not seem to work. Can anyone help?

      O Offline
      O Offline
      ODБOï
      wrote on 29 Jul 2020, 21:12 last edited by ODБOï
      #2

      @lawrence-emke hi,
      i think what you need is QML Flickable type

      Window {
          visible: true
          width: 640
          height: 480
          title: qsTr("Hello World")
      
          Flickable {
              width: 400; height: 400
              contentWidth: gameBoard.width; contentHeight: gameBoard.height
              clip: true
              ScrollBar.horizontal: ScrollBar { active: true}
              ScrollBar.vertical: ScrollBar {  active: true}
              Rectangle{
                  id: gameBoard
                  height: 2000
                  width: 2000
                  color: "grey"
                  Repeater{
                      model: 10
                      Drag.active: dragMouse.drag.active
                      Rectangle{
                          height: 80;width: 80
                          x : width * index
                          y : height * index
                          color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
                          MouseArea{
                              id:dragMouse
                              anchors.fill: parent
                              drag.target: parent
                          }
                      }
                  }
              }
          }
      }
      
      L 1 Reply Last reply 31 Jul 2020, 22:34
      3
      • O ODБOï
        29 Jul 2020, 21:12

        @lawrence-emke hi,
        i think what you need is QML Flickable type

        Window {
            visible: true
            width: 640
            height: 480
            title: qsTr("Hello World")
        
            Flickable {
                width: 400; height: 400
                contentWidth: gameBoard.width; contentHeight: gameBoard.height
                clip: true
                ScrollBar.horizontal: ScrollBar { active: true}
                ScrollBar.vertical: ScrollBar {  active: true}
                Rectangle{
                    id: gameBoard
                    height: 2000
                    width: 2000
                    color: "grey"
                    Repeater{
                        model: 10
                        Drag.active: dragMouse.drag.active
                        Rectangle{
                            height: 80;width: 80
                            x : width * index
                            y : height * index
                            color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
                            MouseArea{
                                id:dragMouse
                                anchors.fill: parent
                                drag.target: parent
                            }
                        }
                    }
                }
            }
        }
        
        L Offline
        L Offline
        lawrence.emke
        wrote on 31 Jul 2020, 22:34 last edited by
        #3
        This post is deleted!
        1 Reply Last reply
        0

        1/3

        29 Jul 2020, 20:24

        • Login

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