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

tumbler doesnot fit rectangle when rotation -90 is given.



  • I am running following example code, output does not fit in entire window as it does with vertical view.

    1. Is tumbler can not be used for horizontal visualization?
    2. Can I use SwipeView on the same and also I want wrapping.

    Thanks in advance.

    import QtQuick 2.12
    import QtQuick.Controls 2.12

    Tumbler {
    id: control
    model: 15
    width: 200
    height: 100
    rotation: -90
    background: Item {
    Rectangle {
    opacity: control.enabled ? 0.2 : 0.1
    border.color: "#000000"
    width: parent.width
    height: 1
    anchors.top: parent.top
    }

        Rectangle {
            opacity: control.enabled ? 0.2 : 0.1
            border.color: "#000000"
            width: parent.width
            height: 1
            anchors.bottom: parent.bottom
        }
    }
    
    delegate: Text {
        text: qsTr("Item %1").arg(modelData + 1)
        font: control.font
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
    }
    
    Rectangle {
        anchors.horizontalCenter: control.horizontalCenter
        y: control.height * 0.4
        width: 40
        height: 1
        color: "#21be2b"
    }
    
    Rectangle {
        anchors.horizontalCenter: control.horizontalCenter
        y: control.height * 0.6
        width: 40
        height: 1
        color: "#21be2b"
    }
    

    }



  • I have no idea about SwipeView in this scenario, but you can certainly use Tumbler in horizontal view by adding Rotation to your Text;

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    Window {
        visible: true
        width: 200
        height: 200
        title: qsTr("Hello World")
    
        Tumbler {
            id: control
            model: 15
            width: 200
            height: 200
            rotation: -90
            anchors.fill: parent
            background: Item {
                Rectangle {
                    opacity: control.enabled ? 0.2 : 0.1
                    border.color: "#000000"
                    width: parent.width
                    height: 1
                    anchors.top: parent.top
                }
    
                Rectangle {
                    opacity: control.enabled ? 0.2 : 0.1
                    border.color: "#000000"
                    width: parent.width
                    height: 1
                    anchors.bottom: parent.bottom
                }
            }
    
            delegate: Text {
                rotation: 90
                text: qsTr("Item %1").arg(modelData + 1)
                font: control.font
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
            }
    
            Rectangle {
                anchors.horizontalCenter: control.horizontalCenter
                y: control.height * 0.4
                width: 40
                height: 1
                color: "#21be2b"
            }
    
            Rectangle {
                anchors.horizontalCenter: control.horizontalCenter
                y: control.height * 0.6
                width: 40
                height: 1
                color: "#21be2b"
            }
        }
    }
    
    

    tumbler-horizontal.JPG



  • @dsba said in tumbler doesnot fit rectangle when rotation -90 is given.:

    Thanks for the reply.

    Kindly expand the window, you will see Tumbler that does not fit completely. I want It to fit completely in below mentioned Width and Height.

    width: 200
    height: 100



  • @dsba said in tumbler doesnot fit rectangle when rotation -90 is given.:

    @dsba said in tumbler doesnot fit rectangle when rotation -90 is given.:

    Thanks for the reply.

    Kindly expand the window, you will see Tumbler that does not fit completely. I want It to fit completely in below mentioned Width and Height.

    width: 200
    height: 100

    yes, I noticed that when I first ran your code, it is because rotation is performed on the x axis not from the centre of the object.

    Look at my code, the Tumbler is anchored to fill the main window. The main window is set to accommodate a maximum height or width of 200 allowing tumbler to fit when rotated.



  • I copied your code and executing, I still have same issue. I am using ubuntu 18.04.
    Do you still get completely filled if you increase width to 500?

    tumber.png



  • Try pasting the following code. You should now get the size you want with some tweaking to make the text readable;

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    ApplicationWindow {
        visible: true
        width: 200
        height: 100
        title: qsTr("Hello World")
    
        Tumbler {
            id: control
            model: 15
            width: 200
            height: 100
            rotation: -90
            anchors.fill: parent
            opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
            delegate: Text {
                rotation: 90
                text: qsTr("Item\n %1").arg(modelData + 1)
                font.pixelSize: 8
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
            }
            Rectangle {
                anchors.horizontalCenter: control.horizontalCenter
                y: control.height * 0.35
                width: 80
                height: 2
                color: "red"
            }
            Rectangle {
                anchors.horizontalCenter: control.horizontalCenter
                y: control.height * 0.65
                width: 80
                height: 2
                color: "red"
            }
        }
    }
    

    200x100.JPG



  • Thanks for the help.
    Maybe my question is not explained properly I believe.
    Tumbler does not get fit inside window completely. I have highlighted tumbler color so that it could be explained well for your kind reference.
    ApplicationWindow {
    visible: true
    width: 200
    height: 100
    title: qsTr("Hello World")

    Tumbler {
        id: control
        model: 15
        width: 200
        height: 100
        background: Rectangle {
            anchors.fill: control
            color: "lightblue"
        }
    
        rotation: -90
        anchors.fill: parent
        delegate: Text {
            rotation: 90
            text: qsTr("Item\n %1").arg(modelData + 1)
            font.pixelSize: 8
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }
    

    }

    s2.png



  • Yeah, I got the feeling I wasn't understanding you correctly, I may still have this wrong but here goes.

    We can maintain the size of the main window (width: 200; height: 100) but to fill the window with Tumbler, increase the height of Tumbler from '150' to '200' and change 'anchors.fill: parent' to 'anchors.centerIn: parent'

        Tumbler {
            id: control
            model: 15
            width: 200
            height: 200
            rotation: -90
            anchors.centerIn: parent
    

    tumbler-filled-color.JPG

    Do I still misunderstand @dsba ?.....or are we getting somewhere?



  • @Markkyboy said in tumbler doesnot fit rectangle when rotation -90 is given.:

    anchors.centerIn: parent

    Thanks @Markkyboy .
    During Horizontal representation of tumbler, parent.width becomes height of the Tumbler and parent.height to be width of the Tumbler. Hence, this seems to be working for the width and height that I was required with.
    Tumbler {
    id: tumbler
    width: parent.height
    height: parent.width
    rotation: -90 // <---- Rotate there
    anchors.centerIn: parent


Log in to reply