How to handle dynamic elements in qml?

Akash1000

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.

jsulm

@Akash1000 Use layouts: http://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html

Akash1000

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.