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

scroll horizontal and vertical for a very large rectangle

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
treeview
3 Posts 2 Posters 805 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.
  • lawrence.emkeL Offline
    lawrence.emkeL Offline
    lawrence.emke
    wrote on 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?

    ODБOïO 1 Reply Last reply
    0
    • lawrence.emkeL lawrence.emke

      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?

      ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on 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
                          }
                      }
                  }
              }
          }
      }
      
      lawrence.emkeL 1 Reply Last reply
      3
      • ODБOïO ODБOï

        @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
                            }
                        }
                    }
                }
            }
        }
        
        lawrence.emkeL Offline
        lawrence.emkeL Offline
        lawrence.emke
        wrote on last edited by
        #3
        This post is deleted!
        1 Reply Last reply
        0

        • Login

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