保证金在qml中不起作用

Question

我正在为游戏制作UI。当我尝试为图片tab.png添加页边空白

它不反映任何更改。它留在以前。我还尝试通过在Layout中添加边距并将其添加到矩形和行布局之外来解决此问题，但是没有任何反应。  另外，当我在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";

                        }


                    }

                }
        }
    }

}
}

Answer 1

布局仅影响您的直系子级，而不影响子级的子级。因此，Layout.leftMargin: 20不会影响您在这种情况下看到的图像。

解决方案非常简单，因为项的位置相对于父项的左上角位置，所以它建立了属性x: 20

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

Answer 2

在矩形内部，对于子元素，您需要使用anchors.margin，而对于布局，子元素可以使用Layout.margin。您需要将 anchors.leftMargin：用作父元素为矩形，Layout.margin将没有任何效果。

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

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