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!
Bookmarks