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. Resize ApplicationWindow
Forum Updated to NodeBB v4.3 + New Features

Resize ApplicationWindow

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
7 Posts 3 Posters 8.4k Views 2 Watching
  • 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.
  • A Offline
    A Offline
    att_
    wrote on last edited by
    #1

    Hi,

    I am learning QML by writing my first project. A calculator. This calculator can have a basic or advanced mode. The advanced mode has more buttons than the basic one. So I need to change the size of the ApplicationWindow depending on the mode I am in.
    I will have a drawer for mode selection and a stackview for my grid of buttons. My challenge is to pass the grid width to the parents so that ApplicationWindow can set its width correctly. But before I can get to this level, I write this simple qml to set ApplicationWindow size.

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.0

    ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ColumnLayout
    {
        spacing: 50
        Rectangle
        {
            width: 100; height: 100; color: "red"
            Text
            {
                text: qsTr("Size 500X500")
            }
            MouseArea
            {
                anchors.fill: parent
                onClicked: console.log("change to 500X500")
            }
        }
        Rectangle
        {
            width: 100; height: 100; color: "red"
            Text
            {
                text: qsTr("Size 600X600")
            }
            MouseArea
            {
                anchors.fill: parent
                onClicked: console.log("change to 600X600")
            }
        }
    }
    

    }

    How can I change the ApplicationWindow size when onClicked is called?

    Thanks in advance,
    Anthony

    raven-worxR 1 Reply Last reply
    0
    • A att_

      Hi,

      I am learning QML by writing my first project. A calculator. This calculator can have a basic or advanced mode. The advanced mode has more buttons than the basic one. So I need to change the size of the ApplicationWindow depending on the mode I am in.
      I will have a drawer for mode selection and a stackview for my grid of buttons. My challenge is to pass the grid width to the parents so that ApplicationWindow can set its width correctly. But before I can get to this level, I write this simple qml to set ApplicationWindow size.

      import QtQuick 2.7
      import QtQuick.Controls 2.0
      import QtQuick.Layouts 1.0

      ApplicationWindow {
      visible: true
      width: 640
      height: 480
      title: qsTr("Hello World")

      ColumnLayout
      {
          spacing: 50
          Rectangle
          {
              width: 100; height: 100; color: "red"
              Text
              {
                  text: qsTr("Size 500X500")
              }
              MouseArea
              {
                  anchors.fill: parent
                  onClicked: console.log("change to 500X500")
              }
          }
          Rectangle
          {
              width: 100; height: 100; color: "red"
              Text
              {
                  text: qsTr("Size 600X600")
              }
              MouseArea
              {
                  anchors.fill: parent
                  onClicked: console.log("change to 600X600")
              }
          }
      }
      

      }

      How can I change the ApplicationWindow size when onClicked is called?

      Thanks in advance,
      Anthony

      raven-worxR Offline
      raven-worxR Offline
      raven-worx
      Moderators
      wrote on last edited by
      #2

      @att_ said in Resize ApplicationWindow:
      set an id for the window and set it's size:

      ApplicationWindow {
          id: window
         ....
         MouseArea
              {
                  anchors.fill: parent
                  onClicked: {
                         window.width = 500
                         window.height = 500
                  }
              }
      }
      

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

      A 1 Reply Last reply
      0
      • raven-worxR raven-worx

        @att_ said in Resize ApplicationWindow:
        set an id for the window and set it's size:

        ApplicationWindow {
            id: window
           ....
           MouseArea
                {
                    anchors.fill: parent
                    onClicked: {
                           window.width = 500
                           window.height = 500
                    }
                }
        }
        
        A Offline
        A Offline
        att_
        wrote on last edited by
        #3

        @raven-worx Thank you for the quick reply.

        I implemented as suggested. I am able to see the window size changed. However, by clicking button 1 and 2 and back and forth, the screen is completely messed up. The buttons are not displayed where they supposed to be. I have to drag the window into another monitor to force the window to refresh. Also when I resize the window to enlarge it, the app is showing some black lines. How do I force a refresh of the window each time the size has changed?

        Anthony

        raven-worxR 1 Reply Last reply
        0
        • A att_

          @raven-worx Thank you for the quick reply.

          I implemented as suggested. I am able to see the window size changed. However, by clicking button 1 and 2 and back and forth, the screen is completely messed up. The buttons are not displayed where they supposed to be. I have to drag the window into another monitor to force the window to refresh. Also when I resize the window to enlarge it, the app is showing some black lines. How do I force a refresh of the window each time the size has changed?

          Anthony

          raven-worxR Offline
          raven-worxR Offline
          raven-worx
          Moderators
          wrote on last edited by
          #4

          @att_
          This rather sounds like a bug?
          What version of Qt are you using? And on what platform?
          Can you post a screenshot/video of the behavior?

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

          A 1 Reply Last reply
          0
          • raven-worxR raven-worx

            @att_
            This rather sounds like a bug?
            What version of Qt are you using? And on what platform?
            Can you post a screenshot/video of the behavior?

            A Offline
            A Offline
            att_
            wrote on last edited by
            #5

            @raven-worx

            I am using QT 5.7.1 on Windows 8.1 Enterprise with this qmake command "qmake.exe test.pro -spec win32-msvc2013 "CONFIG+=debug" "CONFIG+=qml_debug""

            Here is the code I am using

            main.cpp
            #include <QGuiApplication>
            #include <QQmlApplicationEngine>

            int main(int argc, char *argv[])
            {
            QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
            QGuiApplication app(argc, argv);

            QQmlApplicationEngine engine;
            engine.load(QUrl(QLatin1String("qrc:/main.qml")));
            
            return app.exec();
            

            }

            main.qml
            import QtQuick 2.7
            import QtQuick.Controls 2.0
            import QtQuick.Layouts 1.0

            ApplicationWindow {
            id: app
            visible: true
            width: 640; height: 480
            // maximumWidth: width; maximumHeight: height
            // minimumWidth: width; minimumHeight: height
            title: qsTr("Hello World")

            ColumnLayout
            {
                spacing: 50
                Rectangle
                {
                    width: 100; height: 100; color: "red"
                    Text
                    {
                        text: qsTr("Size 500X500")
                    }
                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:
                        {
                            app.width = 500
                            app.height = 500
                            app.update()
                        }
                    }
                }
                Rectangle
                {
                    width: 100; height: 100; color: "red"
                    Text
                    {
                        text: qsTr("Size 600X600")
                    }
                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:
                        {
                            app.width = 600
                            app.height = 600
                            app.update()
                        }
            
                    }
                }
            }
            

            }

            I am new to the forum. I do not know how to attach pictures.

            Anthony

            A 1 Reply Last reply
            0
            • A att_

              @raven-worx

              I am using QT 5.7.1 on Windows 8.1 Enterprise with this qmake command "qmake.exe test.pro -spec win32-msvc2013 "CONFIG+=debug" "CONFIG+=qml_debug""

              Here is the code I am using

              main.cpp
              #include <QGuiApplication>
              #include <QQmlApplicationEngine>

              int main(int argc, char *argv[])
              {
              QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
              QGuiApplication app(argc, argv);

              QQmlApplicationEngine engine;
              engine.load(QUrl(QLatin1String("qrc:/main.qml")));
              
              return app.exec();
              

              }

              main.qml
              import QtQuick 2.7
              import QtQuick.Controls 2.0
              import QtQuick.Layouts 1.0

              ApplicationWindow {
              id: app
              visible: true
              width: 640; height: 480
              // maximumWidth: width; maximumHeight: height
              // minimumWidth: width; minimumHeight: height
              title: qsTr("Hello World")

              ColumnLayout
              {
                  spacing: 50
                  Rectangle
                  {
                      width: 100; height: 100; color: "red"
                      Text
                      {
                          text: qsTr("Size 500X500")
                      }
                      MouseArea
                      {
                          anchors.fill: parent
                          onClicked:
                          {
                              app.width = 500
                              app.height = 500
                              app.update()
                          }
                      }
                  }
                  Rectangle
                  {
                      width: 100; height: 100; color: "red"
                      Text
                      {
                          text: qsTr("Size 600X600")
                      }
                      MouseArea
                      {
                          anchors.fill: parent
                          onClicked:
                          {
                              app.width = 600
                              app.height = 600
                              app.update()
                          }
              
                      }
                  }
              }
              

              }

              I am new to the forum. I do not know how to attach pictures.

              Anthony

              A Offline
              A Offline
              att_
              wrote on last edited by
              #6

              @att_

              Here are more information on this bug. This happens only in Windows 8.1 and all other files removed. Let me elaborate.

              Project 1:
              Create a "Qt Quick Control 2 Application" with all the default setting.
              Do not change anything in the code.
              Compile and run.
              The resize works fine.

              Project 2:
              Create a "Qt Quick Control 2 Application" with all the default setting.
              Remove Page1.qml, Page1Form.ui.qml, and qtquickcontrols.conf
              in main.qml, remove SwipeView and footer sections. So the code just looks like this
              ApplicationWindow {
              visible: true
              width: 640
              height: 480
              title: qsTr("Hello World")

              }
              Compile and run.
              The resize does not work.
              when the screen gets bigger, the app is not refreshed. "black" area is shown instead of "white".
              when the screen gets smaller, the app is repainted correctly.

              I created the same project1 and project2 on a Windows 7 Enterprise. Both project1 and project2 work fine.

              Anthony

              1 Reply Last reply
              0
              • rightecR Offline
                rightecR Offline
                rightec
                wrote on last edited by
                #7

                That problem happens to me with Qt 6.2.4 in Windows 10. How can we solve it?

                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