qt - margin 在 qml 中不起作用

Question

我正在为游戏制作 UI。当我尝试为图像 tab.png 放置边距时

它不反射(reflect)任何更改。它停留在原来的位置。我还尝试通过布局添加边距并将其添加到矩形和行布局之外来解决此问题，但没有任何反应。 此外，当我在 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"
    }
}