GridLayout fill content bottom to top

[Saman19]

hello I want to fill my contents from bottom to top.
that means in a gridlayout each rectangle or any content take place in bottom of window and each next rectangle take place in next place and fill window to top.
How can do this?
please help me...

[6thC]

Something like? :
http://doc.qt.io/qt-5/qml-qtquick-gridview.html#flow-prop

[Saman19]

Thanks for your response...
Yes like this...
but this is TopToBottom...
I want to BottomToTop
How can solve this?

[J.Hilk]

@Saman19
most likly by combining it with effectiveLayoutDirection , the entry one above flowcontrol in the docu

[Enrique_PM02]

Did you fix it? I have the same issue.

[Enrique_PM02]

@J-Hilk I trying to use this but It didnt fix the problem. Have you got any more idea?

[J.Hilk]

@Enrique_PM02 my original comment doesn't seem o lead to the desired conclusion (did some tests) myself

the only thing I can think of is subclassing AbstractItemModel and doing the reversing there

[UlrichS]

Hi! With GridView you can set verticalLayoutDirection: GridView.BottomToTop and it populates items from bottom to up, works fine.

However with GridLayout there seems to be no such property. One hack to achieve this behaviour with GridLayout would be to rotate the GridLayout component by 180 degrees and counter rotate its children accordingly. You can also use LayoutMirroring property to control left-to-right right-to-left behavior. Depending on what you are trying to achieve this might be a workaround for you.

Here's example code, (click on window to switch between top-to-bottom and bottom-to-top):

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    GridLayout {
        LayoutMirroring.enabled: grid.rotation == 180
        id: grid
        columns: 3
        anchors.fill: parent
        rotation: 0

        Text { text: "Three"; font.bold: true; rotation: grid.rotation }
        Text { text: "words"; color: "red"; rotation: grid.rotation }
        Text { text: "in"; font.underline: true; rotation: grid.rotation }
        Text { text: "a"; font.pixelSize: 20; rotation: grid.rotation }
        Text { text: "row"; font.strikeout: true; rotation: grid.rotation }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (grid.rotation == 0)
                grid.rotation = 180
            else
                grid.rotation = 0
        }
    }
}

Regards,
Ulrich