Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved Rotate QtQuick.Controls 2.x Dialog

    QML and Qt Quick
    5
    10
    903
    Loading More Posts
    • 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.
    • M
      md2012 last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • M
        md2012 last edited by md2012

            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

        raven-worx 1 Reply Last reply Reply Quote 0
        • raven-worx
          raven-worx Moderators @md2012 last edited by raven-worx

          @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.

          --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
          If you have a question please use the forum so others can benefit from the solution in the future

          M 1 Reply Last reply Reply Quote 0
          • M
            md2012 @raven-worx last edited by

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

            Cannot override FINAL property
            
            raven-worx 1 Reply Last reply Reply Quote 0
            • raven-worx
              raven-worx Moderators @md2012 last edited by

              @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

              --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
              If you have a question please use the forum so others can benefit from the solution in the future

              1 Reply Last reply Reply Quote 1
              • M
                md2012 last edited by md2012

                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

                1 Reply Last reply Reply Quote 0
                • J
                  jpnurmi 0 last edited by jpnurmi 0

                  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 }
                          }
                      }
                  }
                  
                  M H 2 Replies Last reply Reply Quote 2
                  • M
                    md2012 @jpnurmi 0 last edited by md2012

                    @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 ...

                    1 Reply Last reply Reply Quote 0
                    • V
                      Va06 last edited by

                      This post is deleted!
                      1 Reply Last reply Reply Quote 0
                      • H
                        Hit Tiger Tonight @jpnurmi 0 last edited by

                        @jpnurmi-0 Perfect solution.

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post