Qt 保证金为'；t在qml工作

我正在为游戏制作UI。当我尝试为image tab.png添加边距时

它没有反映出它的任何变化。它停留在以前的地方。我还试图通过在布局中添加边距以及在矩形和行布局之外添加边距来解决这个问题，但什么也没有发生。 另外，当我在user.png的底部添加边距以使其向上移动时，它不会移动。所以请帮我解决这个问题。我想将tab.png定位为此布局

第二个圆圈是我要放置tab.png的地方。代码的输出

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";

                        }


                    }

                }
        }
    }

}
}

---

布局只影响您的直接子级，而不影响子级的子级。因此，在本例中，

Layout.leftMargin:20

不会影响图像

解决方案非常简单，它建立了属性

x:20

，因为项的位置是相对于父项的左上角位置的

Rectangle {
    Layout.fillWidth: true
    Layout.fillHeight: true
    color: "black"
    Image { 
        x:20
        source: "qrc:/img/tab.png"
    }
}

---

在矩形内部，对于子元素，您需要使用

锚定。页边距

，而对于布局，子元素可以使用

布局。页边距

。您需要使用锚定。leftMargin:因为父元素是矩形，

布局。页边距

不会有任何效果

Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: "black"
                    Image {

                        source: "qrc:/img/tab.png"
                        anchors.leftMargin: 20
                    }
                }

---

没有左锚定

图像

到父级<代码>锚定。leftMargin将不起作用