Change elements size in a grid

[asieriko]

Hello and Happy New Year,
I'm trying to create a simple grid in QML whose elements are rectangles that contains a image and a text. I want to create a mobile-like menu.
I've two files, one with a generic menu item and another with the grid of those items.
It works well if the height and width of the items are hardcoded but it doesen't if I try to adapt on the parent size (height: parent.height/3). All of the items appear on the center of the parent and the image is not show.

How can I achive it, so when the parent size changes the elements will adapt?

Code:

//mitem.qml
import QtQuick 2.0
 
Rectangle {
    width: 50   // Doesn't work width: parent.width/3
    height: width
   Image{
     id:img
     width: parent.width*3/5
     height: width
     anchors.horizontalCenter: parent.horizontalCenter
     source: "http://qmlbook.org/_images/flow.png"
 
   }
   Text{
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Test"
   }
}

//mitem.qml
import QtQuick 2.0

Rectangle {
    width: 50   // Doesn't work width: parent.width/3
    height: width
   Image{
     id:img
     width: parent.width*3/5
     height: width
     anchors.horizontalCenter: parent.horizontalCenter
     source: "http://qmlbook.org/_images/flow.png"

   }
   Text{
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Test"
   }
}

To copy to clipboard, switch view to plain text mode 

//main.qml
import QtQuick 2.0
 
Rectangle{
    id: root
    width: 160
    height: 160
    Grid {
        id: grid
        rows: 2
        columns: 2
        anchors.centerIn: parent
        spacing: 8
        mitem { }
        mitem { }
        mitem { }
        mitem { }
    }
 
}

//main.qml
import QtQuick 2.0

Rectangle{
    id: root
    width: 160
    height: 160
    Grid {
        id: grid
        rows: 2
        columns: 2
        anchors.centerIn: parent
        spacing: 8
        mitem { }
        mitem { }
        mitem { }
        mitem { }
    }

}

To copy to clipboard, switch view to plain text mode 

Thanks!

[anda_skoa]

Well, if the Grid's size is determined by the size of its children, then the children can hardly reference the Grid's size. Otherwise you have an unsolvable loop.

Maybe you want to refer to the size of the Rectangle root?

Cheers,
_

[asieriko]

Hello,
I noticed that after I posted.
I've found a workaround, it won't be the best, but at least It works in some way.

//in mitem.qml
//In Rectangle
 width: parent.parent.width/4

//in mitem.qml
//In Rectangle
 width: parent.parent.width/4

To copy to clipboard, switch view to plain text mode 

The grids width isn't known but the grid's parent's is, So knowing the layout of the app It could help.

Anyway, Is there any better way to achive a resizable elements grid?

[anda_skoa]

Hello,
I noticed that after I posted.
I've found a workaround, it won't be the best, but at least It works in some way.

//in mitem.qml
//In Rectangle
 width: parent.parent.width/4

//in mitem.qml
//In Rectangle
 width: parent.parent.width/4

To copy to clipboard, switch view to plain text mode 

I would do that in main.qml instead

//main.qml
import QtQuick 2.0
 
Rectangle{
    id: root
    width: 160
    height: 160
    Grid {
        property int itemWidth: parent.width / 3
        id: grid
        rows: 2
        columns: 2
        anchors.centerIn: parent
        spacing: 8
        mitem { width: parent.itemWidth }
        mitem { width: parent.itemWidth }
        mitem { width: parent.itemWidth }
        mitem { width: parent.itemWidth }
    }
}

//main.qml
import QtQuick 2.0

Rectangle{
    id: root
    width: 160
    height: 160
    Grid {
        property int itemWidth: parent.width / 3
        id: grid
        rows: 2
        columns: 2
        anchors.centerIn: parent
        spacing: 8
        mitem { width: parent.itemWidth }
        mitem { width: parent.itemWidth }
        mitem { width: parent.itemWidth }
        mitem { width: parent.itemWidth }
    }
}

To copy to clipboard, switch view to plain text mode 

I.e. don't make assumptions inside a component about the components surroundings.

Cheers,
_

[asieriko]

Thank you,
This is much more elegant!

And It had helped me understanding more the way qml works. Thank you!