Margin isn't working in qml - qt

Question

I am making UI for a game. When I tried to put margin for the image tab.png
It doesn't reflect any changes to it. It stays where it was before. I also tried to solve this problem by adding the margins through the Layout and by adding it outside the rectangle and row layout but nothing happened.
Also when I am adding margin to the bottom to the user.png to shift it a bit upward, it isn't shifting. So please help me out to solve this. I want to position the tab.png as this layout
The second circle is where I want to place the tab.png. The output of the code
Window {
visible: true
width: 800
height: 600
title: qsTr("Main screen")
ColumnLayout{
spacing: 0
anchors.fill: parent
Item {
id: titlebar
Layout.preferredHeight: 60
Layout.fillWidth: true
RowLayout {
anchors.fill: parent
spacing: 0
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "black"
Image {
source: "qrc:/img/tab.png"
anchors.leftMargin: undefined
Layout.leftMargin: 20
}
}
Rectangle {
Layout.preferredWidth: 100
Layout.fillHeight: true
color: "#f46b42"
/*Text {
anchors.centerIn: parent
text: "Actions"
}*/
Image{
id:image_user
source: "qrc:/img/user.png"
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset:
anchors.left=parent.left
anchors.leftMargin: 10
clip: true
}
Item{
id:text_content
anchors.centerIn: parent
anchors.bottomMargin: 20
Text{
id:text_user
text: "User"
anchors.bottom:text_value.top
anchors.bottomMargin: 4
}
Text{
id:text_value
text:"$ 2000"
color:"yellow"
}}
}
}
}
Rectangle {
id: content
Layout.fillHeight: true
Layout.fillWidth: true
color: "lightyellow"
Text {
anchors.centerIn: parent
}
Column{
spacing: 1;
Repeater{
id:mmm
model: 5
Rectangle{
id:imgl
width: 100
height: 100
color: "#4286f4"
property string src: ""
MouseArea{
anchors.fill:parent
onClicked: {
parent.color="";
}
}
Image {
id: imgx
source: parent.src;
anchors.verticalCenter: parent.verticalCenter
}
onParentChanged: {
mmm.itemAt(0).src="qrc:/img/5by90.png";
mmm.itemAt(1).src="qrc:/img/6by42.png";
mmm.itemAt(2).src="qrc:/img/12by24.png";
mmm.itemAt(3).src="qrc:/img/fortune.png";
mmm.itemAt(4).src="qrc:/img/mini-roulette.png";
}
}
}
}
}
}
}

Answer 1

Layouts only affect your direct children, not the children of the children., so Layout.leftMargin: 20 will not affect Image as you see in this case.
The solution is really simple, it establishes the property x: 20 since the position of item is with respect to the parent's topleft position
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "black"
Image {
x:20
source: "qrc:/img/tab.png"
}
}

Answer 2

Inside Rectangle, for child elements, you need to use anchors.margin, whereas for Layouts child element can use Layout.margin.You need to use anchors.leftMargin: as Parent is Rectangle, Layout.margin will not have any effect.
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "black"
Image {
source: "qrc:/img/tab.png"
anchors.leftMargin: 20
}
}