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.


  • Moderators



  • 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
 

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