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

Rotate QtQuick.Controls 2.x Dialog



  • Hello.
    I'm facing a problem right now that I couldn't find any solution for it so far.
    I'm rotating a Main component which is the child of my ApplicationWindow and rotation works pretty well with every component that is used except Dialog (not the native ones of course).
    any idea how to rotate the Dialog component or create an alternative for it?



  •     Dialog{
            id: resultDialog
            width: Math.min("250",root.width*0.65)
            height: children.height
            x: parent.width/2 - width/2
            y: parent.height/2 - height/2
            title: "Calibration Result"
            modal: false
            CustomLabel{
                horizontalAlignment: "AlignLeft"
                width: parent.width
                text: "Calibration status :\n"+status_
            }
            onClosed: {
                ApplicationBridge.unsetCalibration()
            }
        }
    

    one of the dialogs that i created.
    I'm using Qt5.12.4


  • Moderators

    @md2012
    does the following do what you want?

    Dialog{
            id: resultDialog
            
         default property alias contentData: container.data
    
         Item {
             id: container
             anchors.fill: parent
             rotation: 180
             transformOrigin: Item.Center
         }
        }
    

    note that this only rotates the content. you would need to add a custom title text item as part of the this rotated content instead of the Dialog's internal one. same for the DialogButtonBox.



  • @raven-worx
    Looks like something can not be overridden, but it doesn't say what exactly

    Cannot override FINAL property
    

  • Moderators

    @md2012
    ok then simply rename the contentData proeprty to something else

    You may also want to try the workaround mentioned in the comments of QTBUG-57632



  • Thanks for your time.
    solved it for my case, just created a component called CustomDialog.qml and used the bellow code:

    Dialog{
        id: root
    
        default property alias contentData_: container.data
        property alias title_: titleLabel.text //Use title_ instead of original title so the rotation works on title too
        width: Math.min(250,root.parent.width*0.65)
        height: children.height //Don't change this if you want the column layout to be flexible
        x: appRotation===180 ? parent.width/2 + width/2 : parent.width/2 - width/2  //Center of the window according to rotation angle
        y: appRotation===180 ? parent.height/2 + height/2 : parent.height/2 - height/2 //Center of the window according to rotation angle
        modal: true
    
        Column{
            id: container
            rotation: appRotation
            width: parent.width
            transformOrigin: Item.Center
            CustomLabel{
                id: titleLabel
                width: parent.width
                text: "Title"
                horizontalAlignment: "AlignLeft"
                Component.onCompleted: {
                    font.pointSize=font.pointSize*1.2
                }
            }
            Item { //10 pixel of empty space between the title and content
                width: parent.width
                height: 10
            }
        }
    }
    

    0degree.png 180degree.png



  • Popups follow Window::contentOrientation that you can set to match the rotation that is applied on the content:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    ApplicationWindow {
        id: window
        width: 640
        height: 480
        visible: true
    
        contentOrientation: listModel.get(comboBox.currentIndex).orientation
        contentItem.rotation: listModel.get(comboBox.currentIndex).rotation
    
        ComboBox {
            id: comboBox
            textRole: "text"
            anchors.centerIn: parent
            model: ListModel {
                id: listModel
                ListElement { text: "Portrait"; orientation: Qt.PortraitOrientation; rotation: 0 }
                ListElement { text: "Landscape"; orientation: Qt.LandscapeOrientation; rotation: 90 }
                ListElement { text: "Inverted Portrait"; orientation: Qt.InvertedPortraitOrientation; rotation: 180 }
                ListElement { text: "Inverted Landscape"; orientation: Qt.InvertedLandscapeOrientation; rotation: 270 }
            }
        }
    }
    


  • @jpnurmi-0 said in Rotate QtQuick.Controls 2.x Dialog:

    contentOrientation:

    Great, Thanks.
    Now without any workaround i just added

    contentOrientation: ApplicationBridge.appRotation===0 ? Qt.PortraitOrientation:Qt.InvertedPortraitOrientation
    

    to my ApplicationWindow in addition to my main component rotation.
    The result will be the same on every component which won't load immediately, like Drawer, Dialog, PopUp ...



  • This post is deleted!

Log in to reply