Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

scroll horizontal and vertical for a very large rectangle



  • 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?



  • @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
                        }
                    }
                }
            }
        }
    }
    


  • This post is deleted!

Log in to reply