Resize ApplicationWindow



  • 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


  • Moderators

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


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


  • Moderators

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



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



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.