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

How to handle dynamic elements in qml?



  • I am new to Qt and QML. How to resize a child element of a application window when the application window is maximized ?
    I have the following sample code
    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.0
    import Qt.labs.platform 1.0
    import QtQuick.Layouts 1.3

    ApplicationWindow{
    id:parentWindow
    visible: true
    width: Screen.width/2
    height: Screen.height/2
    color:"black"

    Rectangle{
        width: parent.width
        height: parent.height/10
        x:0
        y:313
    }
    

    }

    Here, when I maximize the application window , the user interface gets distorted.


  • Qt Champions 2019



  • I am still unable to get this working using layouts.
    When I maximize the application window using the maximize/minimize icon on the UI, I can see the original output along with the new resized output on the UI. I also tried the example given on http://doc.qt.io/qt-5/qtquicklayouts-overview.html.

    RowLayout {
    id: layout
    anchors.fill: parent
    spacing: 6
    Rectangle {
    color: 'azure'
    Layout.fillWidth: true
    Layout.minimumWidth: 50
    Layout.preferredWidth: 100
    Layout.maximumWidth: 300
    Layout.minimumHeight: 150
    Text {
    anchors.centerIn: parent
    text: parent.width + 'x' + parent.height
    }
    }
    Rectangle {
    color: 'plum'
    Layout.fillWidth: true
    Layout.minimumWidth: 100
    Layout.preferredWidth: 200
    Layout.preferredHeight: 100
    Text {
    anchors.centerIn: parent
    text: parent.width + 'x' + parent.height
    }
    }
    }

    On maximizing the window using maximize/minimize icon I can see the two rectangles as seen in the original output as well as the two rectangles after resizing.


Log in to reply