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. Scalable dialog using QtQuick.Dialogs

Scalable dialog using QtQuick.Dialogs

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 2 Posters 1.6k 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.
  • S Offline
    S Offline
    ssolomin
    wrote on last edited by ssolomin
    #1

    Hello,

    I've tried create custom qml Dialog using QtQuick.Dialogs with two buttons (Ok and Cancel). But I've ran into 2 problems:

    1. Dialogue with scalable content cannot be created.
      Example code reproduced problem:
    Dialog {
        title: "Scalable rectangles"
            Item {
                anchors.fill: parent
                Rectangle {
                    id: red
                    color: "red"
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.bottom: parent.bottom
                    width: Math.max(128, Math.min(192, parent.width / 2))
                }
                Rectangle {
                    id: blue
                    color: "blue"
                    anchors.top: parent.top
                    anchors.left: red.right
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                }
            }
    }
    

    I see only button "Ok", there are no rectangles, because height of item is 0. Resizing dialog change Item's width only, but anchors.fill has been setted to parent. :-( How can I create scalable dialog or is it a bug?
    2. There are no documented method to set minimum dialogue size.
    I've not found minimumWidth or minimumHeight properties for dialog item. But according source code of qquickabstractdialog.cpp I have found two way to set minimum size: set implicit* properties or set minimumHeight and minimumWidth to contentItem property. I suppose Dialog should have this properties, isn't it?

    Q 2 Replies Last reply
    0
    • S ssolomin

      Hello,

      I've tried create custom qml Dialog using QtQuick.Dialogs with two buttons (Ok and Cancel). But I've ran into 2 problems:

      1. Dialogue with scalable content cannot be created.
        Example code reproduced problem:
      Dialog {
          title: "Scalable rectangles"
              Item {
                  anchors.fill: parent
                  Rectangle {
                      id: red
                      color: "red"
                      anchors.top: parent.top
                      anchors.left: parent.left
                      anchors.bottom: parent.bottom
                      width: Math.max(128, Math.min(192, parent.width / 2))
                  }
                  Rectangle {
                      id: blue
                      color: "blue"
                      anchors.top: parent.top
                      anchors.left: red.right
                      anchors.right: parent.right
                      anchors.bottom: parent.bottom
                  }
              }
      }
      

      I see only button "Ok", there are no rectangles, because height of item is 0. Resizing dialog change Item's width only, but anchors.fill has been setted to parent. :-( How can I create scalable dialog or is it a bug?
      2. There are no documented method to set minimum dialogue size.
      I've not found minimumWidth or minimumHeight properties for dialog item. But according source code of qquickabstractdialog.cpp I have found two way to set minimum size: set implicit* properties or set minimumHeight and minimumWidth to contentItem property. I suppose Dialog should have this properties, isn't it?

      Q Offline
      Q Offline
      Quteroid
      wrote on last edited by Quteroid
      #2

      @ssolomin
      I'd suggest to simply use a Window instead of a Dialog. This should solve both of your asked problems:

      1. make window contents scalable,
      2. set minimum dimensions

      Note that component Dialog is aimed at being "platform-tailored". This prevents the extent of design freedom you're asking for, since on some platforms this freedom may not be common or natively supported by dialogs.

      The following snipplet demonstrates what you're likely trying to achieve:

      • a dialog-like window, with
      • a fully scalable content area
      • horizontally scaling "OK" and "Cancel" buttons
      • minimum dimensions for the window

      Code:

      Window {
          title: "Scalable rectangles"
          minimumWidth: 256
          minimumHeight: 192
          ColumnLayout {
              anchors.fill: parent
              Rectangle {
                  id: scaleableContents
                  color: "gray"
                  Layout.fillWidth: true
                  Layout.fillHeight: true }
              RowLayout {
                  spacing: buttonOk.width >> 2
                  Button {
                      id: buttonOk
                      text: "OK"
                      Layout.fillWidth: true }
                  Button {
                      text: "Cancel"
                      Layout.fillWidth: true } } } }
      

      You may adjust things like minimum dimensions, spacing and button height according to your taste.

      If you really need modality (which I would consider rather evil) then there are other ways to make the underlying ApplicationWindow (or whatever) non-responsive while a dialog is shown.

      1 Reply Last reply
      1
      • S ssolomin

        Hello,

        I've tried create custom qml Dialog using QtQuick.Dialogs with two buttons (Ok and Cancel). But I've ran into 2 problems:

        1. Dialogue with scalable content cannot be created.
          Example code reproduced problem:
        Dialog {
            title: "Scalable rectangles"
                Item {
                    anchors.fill: parent
                    Rectangle {
                        id: red
                        color: "red"
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.bottom: parent.bottom
                        width: Math.max(128, Math.min(192, parent.width / 2))
                    }
                    Rectangle {
                        id: blue
                        color: "blue"
                        anchors.top: parent.top
                        anchors.left: red.right
                        anchors.right: parent.right
                        anchors.bottom: parent.bottom
                    }
                }
        }
        

        I see only button "Ok", there are no rectangles, because height of item is 0. Resizing dialog change Item's width only, but anchors.fill has been setted to parent. :-( How can I create scalable dialog or is it a bug?
        2. There are no documented method to set minimum dialogue size.
        I've not found minimumWidth or minimumHeight properties for dialog item. But according source code of qquickabstractdialog.cpp I have found two way to set minimum size: set implicit* properties or set minimumHeight and minimumWidth to contentItem property. I suppose Dialog should have this properties, isn't it?

        Q Offline
        Q Offline
        Quteroid
        wrote on last edited by
        #3

        @ssolomin

        I just noticed that the sample snipplet from my previous post is prone to a Qt deadlock of type: "QQuickWindow: possible QQuickItem::polish() loop" when heavily playing with window resizing. Please replace the line

        spacing: buttonOk.width >> 2
        

        with something like:

        spacing: width >> 3
        

        to fix this. The result looks essentially the same.

        S 1 Reply Last reply
        0
        • Q Quteroid

          @ssolomin

          I just noticed that the sample snipplet from my previous post is prone to a Qt deadlock of type: "QQuickWindow: possible QQuickItem::polish() loop" when heavily playing with window resizing. Please replace the line

          spacing: buttonOk.width >> 2
          

          with something like:

          spacing: width >> 3
          

          to fix this. The result looks essentially the same.

          S Offline
          S Offline
          ssolomin
          wrote on last edited by
          #4

          @Quteroid
          Thank you for reply.
          I've implemented it using Dialog qml type and overridden contentItem property. But I decided to change standard buttons to custom, so I'll try to rewrite my dialog according to your advice anytime soon :-)

          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