I am writing a QML file for a QT application and I would like to position a rectangle at the bottom of the window like so:

In order to do so, I have tried the following: Layout.alignment: Qt.AlignBottom (as shown below).

Page {

    ColumnLayout{

       width: parent.width
       height: parent.height

       Text{
           text: "Text"
           Layout.alignment: Qt.AlignHCenter
           font.pointSize: 24
        }

        RowLayout{
           Layout.alignment: Qt.AlignHCenter

           Rectangle {
              color: "green"
              width: 200
              height: 200
              radius: width / 2
              anchors.centerIn: parent

           Text{
              text: "50%"
              color: "white"
              anchors.centerIn: parent
              font.pointSize: 24
           }
        }
     }

    Rectangle{
        color: "blue"
        height: 70
        width: parent.width
        Layout.alignment: Qt.AlignBottom

        RowLayout {
           width: parent.width
           height: parent.height

           Image {
              source: "star.svg"
              sourceSize.width: 30
              sourceSize.height: 30
              Layout.alignment: Qt.AlignHCenter
           }

           Image {
              source: "telephone.svg"
              sourceSize.width: 30
              sourceSize.height: 30
              Layout.alignment: Qt.AlignHCenter
           }

           Image {
              source: "barometer.svg"
              sourceSize.width: 15
              sourceSize.height: 40
              Layout.alignment: Qt.AlignHCenter
           }
        }
    }
}

}

And I obtain the following:

As you can see, the blue rectangle is not placed at the bottom of the window. How can I fix this?

CodePudding user response：

Here's how you can achieve it:

Text {
    id: myText
    text: qsTr("Text")
    font.pointSize: 24
    anchors.bottom: myCircle.top
    anchors.horizontalCenter: myCircle.horizontalCenter
}

Rectangle {
    id: myCircle
    color: "green"
    width: 200
    height: 200
    radius: width / 2
    anchors.centerIn: parent

    Text{
        text: "50%"
        color: "white"
        anchors.centerIn: parent
        font.pointSize: 24
    }
}

Rectangle {
    color: "blue"
    width: parent.width
    height: 75
    anchors.bottom: parent.bottom

    Row{
        spacing: 100
        Text {
            text: qsTr("star")
            font.pointSize: 24
        }
        Text {
            text: qsTr("telephone")
            font.pointSize: 24
        }
        Text {
            text: qsTr("barometer")
            font.pointSize: 24
        }
    }
}

CodePudding user response：

You will get what you want after changing the blue rectangle to

    Rectangle{
        color: "blue"
        Layout.preferredHeight: 70
        Layout.fillWidth: true
        Layout.alignment: Qt.AlignBottom
        ...}

Avoid using anchors and fixed size when you use layout to arrange the items